小程序循环按钮多选高亮 / 隐藏

• 本片文章说一下 列表循环出来的按钮如何多选( 顺便提一下单选 )
  • 单选
  • 原理就是 点击按钮获取绑定身上的索引 然后对比 那个按钮身上索引一样
    就给它高亮的class 否则给 “”

	<view wx:for="{{hotList}}" data-id="{{item.id}}"  data-index="{{index}}" bindtap="unit" class="btn {{unitIndex == index ? 'btn-active' : ''}}"  wx:key="*this">
		{{item.unit}}
	</view>

// 0  默认选择第一个
 unitIndex: 0,
 hotList:[
      {
        unit: "天",
        id: 1
      },
      {
        unit: "小时",
        id: 2
      },
      {
        unit: "月",
        id: 3
      },
      {
        unit: "次",
        id: 4
      },
      {
        unit: "单",
        id: 5
      }
    ],
     unit(e){
	    let index = e.target.dataset.index;
	    let price_unit = e.target.dataset.id
	    this.setData({
	      unitIndex: index,
	      price_unit
	  })
  },

• 多选
  
• 原理： 将按钮列表 添加一个属性 selected = false (都不被选中)
  点击那个获取索引 更改数组中的 selected = true (这个索引下的按钮将会高亮)

  上代码

		<view bindtap="potcheckboxChange" wx:for="{{hot_list}}" data-value="{{item.name}}" data-index="{{index}}"
				checked="{{item.selected}}" wx:for-index="index" wx:key="*this"
				class="btn {{item.selected ? 'typeBtn' : ''}}"
				>
			{{item.name}}
		</view>

 potcheckboxChange(e) {
    let string = "hot_list[" + e.target.dataset.index + "].selected"
    this.setData({
      [string]: !this.data.hot_list[e.target.dataset.index].selected
    })
  },

单选：获取点击元素索引和列表中的索引对比相同就给高亮class如果有默认选项为他的下标即可

多选：数组中每个选项都加一个属性selected：false(当然如果想默认选中可以为true)点击获取元素的索引从而更改数组中对应的索引的selected为true反之为false