微信小程序循环点击切换样式

仰淮

已于 2023-02-21 23:58:52 修改

阅读量1.1k

点赞数 1

文章标签：微信小程序小程序

于 2023-01-08 21:29:48 首次发布

本文链接：https://blog.csdn.net/huai42717/article/details/128605807

版权

wxml

  <view class="map_head">
    <view class="{{currindex==item.id ? 'blue1':'blue'}}" data-id="{{item.id}}" wx:for="{{names}}" wx:key="id" bindtap="map_name">
      {{item.name}}
    </view>
  </view>

wxss

.map_head {
  width: 100%;
  display: flex;
  background-color: #FFFFFF;
}

.map_head view {
  width: 15%;
  text-align: center;
  padding-top: 2%;
  padding-bottom: 2%;
}

.blue {
  font-weight: 600;
}

.blue1 {
  border-bottom: 2px solid #2979ff;
  font-weight: 600;
  color: #2979ff;
}

Page({
  data: {
    currindex: 1, // 默认值
    list: [
      {
        id: 1,
        name: "张三"
      },
      {
        id: 2,
        name: "李四"
      },
      {
        id: 3,
        name: "王五"
      },
    ]
  },
  map_name: function (e) {
    this.setData({
      currindex: e.currentTarget.dataset.id,
    });
  }
})