2021-04-29

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

image.png

// uniapp语法

<block v-for="(item, index) in weekList" >
                        <view  :class="index == isChoice ? 'tl-tag-80 _on':'tl-tag-80'" @tap='itemChoice' :data-index="index">{{item}}</view>
                    </block>

//原生小程序的语法：
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,
    })
  },

})