（原生小程序）怎么样实现点击效果，点击变色

最新推荐文章于 2025-07-01 16:46:32 发布

一个前端程序猿

最新推荐文章于 2025-07-01 16:46:32 发布

阅读量331

点赞数 1

CC 4.0 BY-SA版权

文章标签：开发语言 javascript 微信小程序前端

本文链接：https://blog.youkuaiyun.com/ZHANG157111/article/details/129835784

文章展示了一种在微信小程序中实现选项选择的方法，通过给每个item添加isSelect属性并结合动态class，实现点击切换选中状态。利用数据绑定更新视图，代码示例包括WXML和CSS部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可多选，具体看需求哦！

具体流程就是给每个item增加一个判断true/false，然后通过动态class判断

<view class="insure_box">
      <view class="insure_title">保险类型</view>
      <view class="insure_body">
        <view class="insure_item {{item.isSelect == true ? 'active' : ''}}" wx:for="{{insureTypeList}}" wx:key="index" 
        data-index="{{index}}"
        catchtap="handleClickItem">{{item.type}}</view>
      </view>
 </view>

.insure_box {
  padding: 32rpx;
  box-sizing: border-box;
}
.insure_box .insure_body {
  padding-top: 32rpx;
  display: flex;
  flex-wrap: wrap;
}
.insure_box .insure_title {
  color: #989898;
}
.insure_box .insure_body .insure_item {
  background: #F2F2F2;
  color: #696969;
  border-radius: 98rpx;
  padding: 10rpx;
  display: flex;
  align-items: center;
  font-size: 26rpx;
  justify-content: space-around;
}
.insure_box .insure_body .insure_item{
  margin-right: 20rpx;
}

data:{
    insureTypeList:[
      {
        type:'平安保险',
        isSelect:false
      },
      {
        type:'人身保险',
        isSelect:false
      },
      {
        type:'太平洋保险',
        isSelect:false
      },
      {
        type:'中国人寿',
        isSelect:false
      },
    ]
},
  handleClickItem(e){
    let index = e.currentTarget.dataset.index
    let insureTypeList = this.data.insureTypeList
    insureTypeList[index].isSelect = !insureTypeList[index].isSelect
    this.setData({
      insureTypeList:insureTypeList
    })
 },