微信小程序实现tab切换 - 简书

来自 : 简书社区 发布时间：2021-03-25

微信小程序tab切换

在wxml文件里面，搭建结构。其中，tab盒子是tab整体，btns里面的view是切换按钮，cons里面的view是切换的盒子内容。

wxml:

 !--index.wxml--  view  view  view /view  /view  view  view /view  /view  /view 

把切换按钮btns和内容cons渲染出来。在js文件里面书写数据，并且在wxml文件里面通过wx:for进行列表渲染输出。

//index.js//获取应用实例const app = getApp()Page({ data: { btns:[\"PS\",\"RP\",\"AE\",\"C4D\"], cons: [\"PS\", \"RP\", \"AE\", \"C4D\"],

wxml:

 !--index.wxml--  view  view  view wx:for=\"{{btns}}\" {{item}} /view  /view  view  view wx:for=\"{{cons}}\" {{item}} /view  /view  /view 

通过弹性布局去书写样式。添加cur当前类名去控制当前按钮的样式和当前显示的内容盒子。

注意微信小程序使用的是rpx可以自适应的单位，规定所有屏幕宽度为750rpx，在iPhone6设备屏幕宽度换算是2rpx=1px。

wxss:

.tab{width: 96%; height:600rpx; border:2rpxsolid #cccccc; margin:60rpx auto;}.tab .btns{ height: 120rpx; background: #eeeeee;display: flex;}.tab .btns view{flex: 1; text-align: center; line-height:120rpx;}.tab .btns .cur{background: #ffffff;}.tab .cons view{height: 480rpx;display: none; text-align: center; line-height:480rpx; font-size:60rpx;}.tab .cons .cur{display: block;}

逻辑层添加了active数据控制当前显示盒子。

//index.js//获取应用实例const app = getApp()Page({ data: { btns:[\"PS\",\"RP\",\"AE\",\"C4D\"], cons: [\"PS\", \"RP\", \"AE\", \"C4D\"], active:0,//控制当前显示盒子 

wxml:

wxml要书写判断验证去控制盒子是否有cur类名。

class=\"{{index==active?\'cur\':\'\'}}\"

上面表达式表示，如果当前项的索引值index等于数据active，则此项有cur这个类名，否则就没有。注意cur类名是控制当前按钮样式和当前显示内容盒子的。

 !--index.wxml--  view  view  view wx:for=\"{{btns}}\" class=\"{{index==active?\'cur\':\'\'}}\" {{item}} /view  /view  view  view wx:for=\"{{cons}}\" class=\"{{index==active?\'cur\':\'\'}}\" {{item}} /view  /view  /view 

有cur这个类名的按钮会显示当前的样式，有cur这个类名的内容盒子是显示的，但是否有这个类名是通过active这个数据决定的。所以最后我们只需要把active这个数据的值修改成用户点击按钮的索引值即可实现tab切换功能。

首先要给按钮btn自定义索引值等于循环当前项的index，微信小程序给组件自定义索引值是通过在组件身上添加data-index=”{{index}}”属性，然后在js里面即可通过事件对象里面的e.currentTarget.dataset.index属性获取用户点击按钮的索引值。

wxml:

给按钮自定义索引值和绑定事件，绑定点击事件通过给按钮组件添加属性bindtap=“函数名”，此处设置函数名为toggle。

 !--index.wxml--  view  view  view wx:for=\"{{btns}}\" class=\"{{index==active?\'cur\':\'\'}}\" data-index=\"{{index}}\" bindtap=\"toggle\" {{item}} /view  /view  view  view wx:for=\"{{cons}}\" class=\"{{index==active?\'cur\':\'\'}}\" {{item}} /view  /view  /view 

把active的值设置为用户点击按钮的索引值，即可实现tab切换功能。

e.currentTarget.dataset.index获取用户点击按钮的索引值，微信小程序通过this.setData()去修改data里面的数据内容。

//index.js//获取应用实例const app = getApp()Page({ data: { btns:[\"PS\",\"RP\",\"AE\",\"C4D\"], cons: [\"PS\", \"RP\", \"AE\", \"C4D\"], active:0,//控制当前显示盒子  toggle:function(e){ //console.log(e.currentTarget.dataset.index) this.setData({ //设置active的值为用户点击按钮的索引值 active:e.currentTarget.dataset.index,