小程序多标签切换、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页面数据一次