小程序多標簽切換、Tab切換類似功能

wxml代碼：

<scroll-view scroll-y style='height:{{svLeftHeight}}px' class='sv' bindtap='getchildren'>
  <view data-id='1' class="{{tabArr.curHdIndex=='1' || tabdefault=='1'? 'on' : ''}}">分類1</view>

  <view data-id='2' class="{{tabArr.curHdIndex=='2'? 'on' : ''}}">分類2</view>

 <view data-id='3' class="{{tabArr.curHdIndex=='3'? 'on' : ''}}">分類3</view> </scroll-view>

 

 

js代碼：

data: {
    svLeftHeight: '100',
    tabArr: {
      curHdIndex: 0,
      curBdIndex: 0
    },

tabdefault: 1

  },

  getchildren: function (e) {

 

if(this.data.tabdefault == 1){

this.setData({

tabdefault: 0

})

}

var dataId = e.target.dataset.id;//獲取到了點擊的是哪個分類
    var obj = {};
    obj.curHdIndex = dataId;
    obj.curBdIndex = dataId;
    this.setData({
      tabArr: obj//將此分類ID傳遞給data進行渲染wxml
    })
  },

每setData一次，就會渲染wxml頁面數據一次