微信小程序开发笔记(九)--单选标签效果

1.wxml：

<block wx:for=\'{{itemList}}\' wx:key=\'{{key}}\'>
    <view class="{{index==isChoice?\'_on\':\'\'}}" bindtap=\'itemChoice\' data-index="{{index}}"><text>{{item.name}}</text></view>
</block>

 

2.wxss：

._on {
  color: #1DB1CF;
  border: 1rpx solid #1DB1CF;
}

 

3.wxjs：

Page({
  data: {
    isChoice: \'0\', //设置默认选中
    itemList: [{
        id: 1,
        name: \'北京\',
      },
      {
        id: 2,
        name: \'上海\',
      },
      {
        id: 3,
        name: \'广州\',
      },
      {
        id: 4,
        name: \'杭州\',
      },
    ]
  },

  itemChoice(e) {
    let index = e.currentTarget.dataset.index;
    console.log(\'您选择了index\', index)
    this.setData({
      isChoice: index,
    })
  },

})