小程序中使用for循环,并动态添加class

前言：

     小程序中使用for循环,并动态添加class

实现效果：

实现代码：

index.wxml中：

<view class='footer'>
    <view
      class="footerLi {{index == active ? 'footerActive' : ''}}"
      wx:for="{{footer}}"
      wx:key="index"
      bindtap='changeActive'
      data-index="{{index}}">
      {{item.name}}
    </view>
  </view>

index.wxss中：

.footerActive{
  background:blue;
  color:#fff;

index.js中：

//index.js
Page({
  data: {
    active: 0,
    footer:[
      {
        id:'1',
        name:'首页',
        url:'index'
      },{
        id:'2',
        name:'列表',
        url:'table'
      },{
        id:'3',
        name:'我的',
        url:'use'
      }

    ]
  },

  onLoad: function() {

  },
  changeActive(item) {
    let index = item.currentTarget.dataset.index
    this.setData({
      active: index
    })
  }


})