微信小程序 TAB选项卡切换

最近一个人负责公司的微信小程序项目，项目做完了，给大家分享一点开发中遇到的坑已经常用的组件，话不多说，今天分享TAB选项卡！

1、先看效果：

  

2、wxml代码

'container'>      'tabbox'>        for="{{tab}}">          'none' class="{{num==index?'selected':''}}" bindtap='clickLabel' data-id='{{item.id}}' data-itype="{{item.itype}}" data-index="{{index}}">{{item.tabname}}                    'tabcontent'>          if="{{itype==0}}">全部          if="{{itype==1}}">好评          if="{{itype==2}}">有图          if="{{itype==3}}">差评      复制代码

wx:for 遍历data数据里面的tab选项;

wx:if 判断传递过来itype的参数，来展示相应的内容;

data-itype  data-index 是我自己写的测试数据定义的当前元素的类型、下标值;

bindtap 绑定点击事件

num==index?'selected':''点击添加一个selected 的class

3、

Page({
  /**   * 页面的初始数据   */  data: {    tab: [      {'id':0,'itype':0,'tabname':'全部'},      {'id':1,'itype':1,'tabname':'好评'},      {'id':2,'itype':2,'tabname':'有图'},      {'id':3,'itype':3,'tabname':'差评'}    ],    num:0,    itype:0  },  /** * 生命周期函数--监听页面加载 */  onLoad: function(options) {},  clickLabel: function (e) {    var that = this;    let index = e.currentTarget.dataset.index;
    <点击获取当前元素下的下标>    let num = e.currentTarget.dataset.index;
   <点击获取当前元素下的num>
    let itype = e.currentTarget.dataset.itype;
  <点击获取当前元素下的itype>
    this.curIndex = e.currentTarget.dataset.index;
    <将获取到的值赋值给data，覆盖里面的 num iteype 已达到点击传参的效果>    this.setData({      curIndex: index,      num: index,      itype: itype    })  },  /*** 生命周期函数--监听页面初次渲染完成*/  onReady: function() { },  /** * 生命周期函数--监听页面显示 */  onShow: function() {},  /** * 生命周期函数--监听页面隐藏 */  onHide: function() {},  /** * 生命周期函数--监听页面卸载 */  onUnload: function() {},  /*** 页面相关事件处理函数--监听用户下拉动作*/  onPullDownRefresh: function() {},  /*** 页面上拉触底事件的处理函数 */  onReachBottom: function() {},  /*** 用户点击右上角分享*/  onShareAppMessage: function() { },})
复制代码

tab:是json的数据格式，从后台后去

num ，itype初始值默认为0，首次页面加载在onload里面执行

转载于:https://juejin.im/post/5bc5a370e51d450e95104f48