小程序多标签切换、Tab切换类似功能

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

posted on 2018-03-15 17:12 飞狐爷 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/cyxxzjp/p/8574712.html