小程序实现 Tab 标签栏

简介: 首先外层使用 View 包裹。我们可以把 View 当作 HTML 中的 div 标签使用来理解就行其次,实现多标签我们首先想到什么,数组。在小程序中数组是怎么嵌套在标签中的? wx:for="{{navTab}}"。

首先外层使用 View 包裹。我们可以把 View 当作 HTML 中的 div 标签使用来理解就行

其次,实现多标签我们首先想到什么,数组。在小程序中数组是怎么嵌套在标签中的? wx:for="{{navTab}}"。 即可。

在 Page 页面的 data 中把数据初始化即可显示出值。那么我们怎么确定当前的标签呢。通过 class 中的current==idx ? ‘active’ : ‘’ 即可。打的不清楚,直接上截图


img_e8e19c7e86bf812be37a14992adb7a67.png

这里点击跳转到其他标签的函数是通过 bindtab 属性来定义的,所以我们在 Page 中实现该函数即可,上截图


img_b36e5a18ccd1631cf915447fe5a5e348.png
page部分的实现

下面给大家看下运行结果


img_9c8eae5863622b456a208c8f4610e654.png
效果图

好了,到此一个简单的 Tab 标签就实现了。

目录
相关文章
|
JSON 小程序 JavaScript
微信小程序|Tab标签页
微信小程序|Tab标签页
330 0
|
2月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
665 1
|
5月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
178 0
|
小程序 JavaScript
微信小程序模仿分类导航实现多个tab 页
微信小程序模仿分类导航实现多个tab 页
72 0
|
小程序 JavaScript
小程序点击轮播图跳转到tab导航界面
小程序点击轮播图跳转到tab导航界面
110 0
|
小程序 JavaScript
微信小程序实现tab页面切换功能
微信小程序实现tab页面切换功能
90 0
|
小程序 索引
【微信小程序】页面tab栏与页面内容联动
我们可以将整个页面考虑成一个轮播图,tab栏就如同轮播图的那小点点,可以控制网那个页面点击,有了思路就非常的好实现了,这时候就需要阅读官网,了解那个属性可以跟轮播图绑定,从而实现点击滚动,滑动也可以使tab栏随之滚动。
466 1
【微信小程序】页面tab栏与页面内容联动
|
小程序
微信小程序丝滑的tab栏
微信小程序丝滑的tab栏
134 0
微信小程序丝滑的tab栏
|
小程序 开发者
【mpvue】微信小程序返回到tab页面并刷新页面,在微信开发者工具运行正常,但是真机调试的时候跳转到了tab页面但不会刷新。getCurrentPages()获取的不是当前页面
1、问题描述 在「添加基金页面pages/addfund/main」添加完基金后,点击取消,会需要跳转到「基金页面pages/index/main」并且刷新出刚刚添加的基金 现在的问题是: 在微信开发者工具中操作时:添加完基金后,会跳转到「基金页面pages/index/main」并且刷新出刚刚添加的基金 在真机调试、预览时:在手机上操作添加完基金后,会跳转到「基金页面pages/index/main」但是不会自动刷新出刚刚添加的基金
456 0
【mpvue】微信小程序返回到tab页面并刷新页面,在微信开发者工具运行正常,但是真机调试的时候跳转到了tab页面但不会刷新。getCurrentPages()获取的不是当前页面
|
小程序
微信小程序:VantWeapp组件Tab 标签默认样式修改
微信小程序:VantWeapp组件Tab 标签默认样式修改
1248 0