微信小程序开发-选项卡功能
微信小程序开发中经常用到选项卡,微信没有自带的选项卡,不过可以用其他的功能组合成选项卡,非常简单。
需要用到的功能:
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>
作者:虚幻的锈色
链接:https://www.jianshu.com/p/f4bb7821db65
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。