下面来详细讲解，微信小程序如何实现tab切换功能，如下图所示：
在wxml文件里面，搭建结构。其中，tab盒子是tab整体，btns里面的view是切换按钮，cons里面的view是切换的盒子内容。
把切换按钮btns和携雀内容cons渲染出来。在js文件里面书写数据，并且在wxml文件里面通过wx:for进行列表渲染输出。
通过d性布局去书写样式。添加cur当前类名去控制当前按钮的样式和当前显示的内容盒子。
注意微信小程序使用的是rpx可以自适应辩猛早的单位，规定所有屏幕宽度为750rpx，在iPhone6设备屏幕宽度换算是2rpx=1px。
逻辑层添加了active数据控制当前显示盒子。
wxml要书写判断验证去控制盒子是否有cur类知游名。
上面表达式表示，如果当前项的索引值index等于数据active，则此项有cur这个类名，否则就没有。注意cur类名是控制当前按钮样式和当前显示内容盒子的。
有cur这个类名的按钮会显示当前的样式，有cur这个类名的内容盒子是显示的，但是否有这个类名是通过active这个数据决定的。所以最后我们只需要把active这个数据的值修改成用户点击按钮的索引值即可实现tab切换功能。
首先要给按钮btn自定义索引值等于循环当前项的index，微信小程序给组件自定义索引值是通过在组件身上添加data-index=”{{index}}”属性，然后在js里面即可通过事件对象里面的e.currentTarget.dataset.index属性获取用户点击按钮的索引值。
给按钮自定义索引值和绑定事件，绑定点击事件通过给按钮组件添加属性bindtap=“函数名”，此处设置函数名为toggle。
把active的值设置为用户点击按钮的索引值，即可实现tab切换功能。
e.currentTarget.dataset.index获取用户点击按钮的索引值，微信小程序通过this.setData()去修改data里面的数据内容。
下图是小程序 小米Lite 的 Tab 切换效果：切换 Page 时，Tab 下方的指示器（红色横条）是没有滚动效果而是直接闪现到下一个 Page 的，这也是市面上小程序常见的 Tab 切换效果。
原生端 TabLayout 常见的功能就是我们的目标效果，所以 目标效果 如下：
通过了解小程序组件及技术支持，选定通过 scroll-view 、swiper 、swiper-item 、movable-area 、movable-view 配合 插槽 和 抽象节点 来实现自定义组件 tab-layout 。
具体如下图所示 ：
主要实现（点击跳转查看源码）
1.复制 tab-layout 组件到项目中 （点击跳转至源码 TabLayout 目录）
4.在布局文件中使用 TabLayout 组件，并通过抽象节点 generic:item-tab 和 generic:item-page 分别与自定义的 Tab 和 Page 绑定
5.使用自闹纯定义属性 indexAreaHeight 为 Index 及其活动区域设置高度
6.使用自定义属性 tabList 设置数据源，根据数据源将自动生成对应数量的乱举 Tab 和 Page
7.按需选择可采用插槽 slot = "index" 或自定义属性 indexStyle 设置 Index 的样式
布局文件 index.wxml 中：
样式文件 index.wxss 中
布局文件 index.wxml 中
PS： 还有一个很重要的方法 onPageUpdata ，用于抽象节点 item-tab 和 item-page 通知父节点 tab-layout 刷新数据，在子控件中通过 this.triggerEvent("updata") 触发
可能出现问题：
1. 当 item-page 中存在竖直滚动的 scroll-view 时出现滑动冲突哗弯碧该如何解决？
在 item-page 组件 attached 方法中按需为 scroll-view 设置固定高度或占满屏幕剩余位置 （点击跳转查看参考写法）
2.当 item-page 或 item-tab 中调用 this.setData ( ) 之后，发现自定义属性 item 获取值为 null ?
出现该种情况，应在 this.setData ( ) 之后，执行 this.triggerEvent("updata") 触发 tab-layout 的 onPageUpdata 方法重新得到 item 值
3.如何实现 " 懒加载 " ，即当 Tab 首次被选中时，才进行对应 Page 的数据加载？
为自定义组件 item-page 设置一个懒加载标志位暂定为 isLoadData ，通过订阅自定义属性 currentIndex ，在 currentIndex 属性变化或组件进行到 attached 生命周期时，通过判断 isLoadData 和 currentIndex 是否与 position 相等来进行数据加载并调整标志位 （点击跳转查看参考写法）
在小程序越来越普及的现状下，如何使得小程序能给用户带来更完善的显示效果和使用体验，是每一个开发者都应该力尽其责的事。鉴于本人当前对小程序和网页端的熟悉程度，该组件或许还存在很多瑕疵，如有更好的见解或建议，欢迎留言。
1、tabBar
在app.json文件中添加tabBar节点。tabBar是小程序客户端底部或顶部tab栏的实现。
（1）tabBar相关属性
color：tab上的文字默认颜色，仅支持十六进制颜色。
selectedColor：tab上的文字选中时的颜色，仅支持十六进制颜色。
backgroundColor：tab的背景色，仅支持十六进制颜色。
borderStyle：tabbar上边框的颜色， 仅支持 black / white。
position：tabBar的位置，默认值是: bottom，仅支持 bottom / top。当 position 为 top 时，不显示 icon。
custom：自定义tabBar。
"tabBar": {
"color": "#000000",
"selectedColor": "#336699",
"backgroundColor": "#ffffff",
"borderStyle": "black",
"position": "bottom"
}
（2）list
list：tab的列表。
list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。
pagePath：页面路径，必须在pages 中先定义。
text：tab 上按钮文字。
iconPath：图片神衡路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。selectedIconPath：选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。
"list": [
{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "assets/icon/home.png",
"selectedIconPath": "assets/icon/home2.png"
},
{
"text": "列表",
"pagePath": "pages/list/list",
"iconPath": "assets/icon/list.png",
"selectedIconPath": "assets/icon/list2.png"
}
]
2、页面跳转
（1）跳转普通页面
方法① navigator组件
<!-- 跳转到普通页，可以通过返回按钮返回 -->
<navigator url="../detail/detail">到详情页</navigator>
方法② navigateTo()方法
navigateTo()方法，用于跳转普通页面。
<view bindtap="gotoDetail">到详情页</view>
gotoDetail(){
//使用全局api跳转，navigateTo()方法，用于跳转普通页面
wx.navigateTo({
url: '../detail/detail',
})
}
（2）跳转tabBar页面
方法① navigator组件
如果要使用navigator组件跳转tabBar页面，需要设置open-type="switchTab"。
<!-- 跳转到tabBar页面，不可以通过返回按钮返回。因为跳转到指定的tabBar页面后，会关闭其他所有页面 -->
<navigator url="../list/list" open-type="switchTab">到列表页</navigator> 袭猛 拍瞎桥
方法② switchTab()方法
switchTab()方法，用于跳转tabBar页面。
<view bindtap="gotoList">到列表页</view>
gotoList(){
wx.switchTab({
url: '../list/list',
})
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）