目标需求:实现下图,给点击的view增加类,每次只能选择一个。
主要思路:给点击的view增加类,依靠点击的index对state进行赋值。如果相同时,给该view增加类。
效果演示:

wxml
<view class="iconusecont-div {{state==index?'active-tag':''}}" bindtap="select_use" wx:for="{{use}}" data-key='{{index}}'> <view class="flex-item"> <rich-text class='use_name'>{{item.use_name}}</rich-text> </view></view>wxss
/* 用途 */.iconusecont-div { display: inline-block; width: 32%; text-align: center; margin-top: 30rpx;}.flex-item { display: inline-block; width: 173rpx; height: 78rpx; font-size: 26rpx; border: 2rpx solid #999; text-align: center; border-radius: 10rpx; color: #000; cursor: pointer; line-height: 30rpx;}.use_name { font-size: 34rpx; line-height: 79rpx;}.active-tag .flex-item { background: #03e2ff; color: #fff; border: 1rpx solid #fff;}js
Page({ data: { use: [{ "use_name": "全部" }, { "use_name": "经济实惠型" }, { "use_name": "家用学习型" }, { "use_name": "豪华发烧型" }, { "use_name": "疯狂游戏型" }, { "use_name": "商务办公型" }, { "use_name": "经济实惠型" }, { "use_name": "家用学习型" }, ], state: '', }, //选择用途后加样式 select_use: function(e) { this.setData({ state: e.currentTarget.dataset.key, }); }, onReady: function() {},})原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见
- 关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源200G干货大全。













