微信小程序开发中经常用到选项卡，微信没有自带的选项卡，不过可以用其他的功能组合成选项卡，非常简单。

image.png
image.png

需要用到的功能：

1. 标签绑定数据及获取

data-current="" 绑定数据到标签中，获取：e.currentTarget.dataset.current;//获取到绑定的数据

2.catchtap 添加事件。

3.通过js数据值，判断需要显示隐藏或者是class样式

class='{{menuTapCurrent=="0"?"btn_selected":""}}'
hidden="{{menuTapCurrent!='0'}}"

原理很简单，设置一个数据，初始值给0，也就是选中第一个，如：选项卡三个按钮三个页面，数值设置0 、1、2；然后点击的时候获取标签中绑定的是几，然后对应设置数据为几，标签中样式和显示隐藏根据数据判断，绑定好。

// js Page({ data:{ menuTapCurrent:0 }, // 点击按钮选项卡切换 menuTap: function (e) { var current = e.currentTarget.dataset.current;//获取到绑定的数据 //改变menuTapCurrent的值为当前选中的menu所绑定的数据 this.setData({ menuTapCurrent: current }); } });//wxml <view class="center_busLine"> <!--按钮--> <view class="_header"> <view class='{{menuTapCurrent=="0"?"btn_selected":""}}' data-current="0" catchtap="menuTap"> <text>推荐线路</text> </view> <view class='{{menuTapCurrent=="1"?"btn_selected":""}}' data-current="1" catchtap="menuTap"> <text>收藏</text> </view> <view class='{{menuTapCurrent=="2"?"btn_selected":""}}' data-current="2" catchtap="menuTap"> <text>历史</text> </view> </view> <!--内容，可以选择包一起，我是直接少包了一层--> <view class="content" hidden="{{menuTapCurrent!='0'}}"></view> <view class="content" hidden="{{menuTapCurrent!='1'}}"></view> <view class="content" hidden="{{menuTapCurrent!='2'}}"></view> </view> 

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:https://www.dengtar.com/12820.html