小程序动态绑定class

4,776 阅读1分钟

1.js文件里data里面定义

	activeIndex:0

2.wxss文件里定义active样式

	.active{
      background: gray;
    }

3.for循环出来数据用data-把下标传过去

  <view class="page">
      <view wx:for="{{tabs}}" wx:key="index" data-index="{{index}}"
      class="pageIndex {{activeIndex ==index?'active':''}}" bindtap="tabClick">
        	{{item}}
      </view>
  </view>

4.js文件内执行点击事件

	tabClick: function (e) {
      console.log(e)
      this.setData({
        activeIndex: e.currentTarget.dataset.index
      });
    },