微信小程序动态更改选中对象的css样式

逻辑

①给原数据添加选中状态,例如:select:false 和判断依据:例如 id:1

②wxml页面三目判断例如: class=" {{ xx.select? 'select' : 'defult' }}"

③在wxss页面分别创建select 和 defult 样式

④给对应标签添加事件接受传入的id值,并进行判断,将点击id的select设置为true,其他为false

案例

 1 Page({
 2 
 3   /**
 4    * 页面的初始数据
 5    */
 6   data: {
 7     monster: {//假设原数据
 8       '帕里镇': {
 9         '独眼蝙蝠': {
10           'id': 1,
11           'name': '独眼蝙蝠',
12           'select': false,
13         },
14         '彭哆菇': {
15           'id': 2,
16           'name': '彭哆菇',
17           'select': false,
18         },
19         '象牙甲虫': {
20           'id': 3,
21           'name': '象牙甲虫',
22           'select': false,
23         },
24 
25       },
26       '晨光镇': {
27         '魔导战甲': {
28           'id': 4,
29           'name': '魔导战甲',
30           'select': false,
31         },
32         '邪恶的南瓜': {
33           'id': 5,
34           'name': '邪恶的南瓜',
35           'select': false,
36         },
37         '巨剑浪人': {
38           'id': 6,
39           'name': '巨剑浪人',
40           'select': false,
41         },
42       }
43     }
44   },
45   
46   /**
47    * 当选中时触发
48    * @param {*} e 
49    */
50   OnSelect(e) {
51     let { id } = e.currentTarget.dataset
52     let { monster } = this.data
53 
54     console.log("当前点击:", id)
55 
56     //根据id,将当前选中的id的select设置为true
57     for (let i in monster) {
58       for (let o in monster[i]) {
59         if (monster[i][o].id == id) {
60           monster[i][o].select = true
61         } else {
62           monster[i][o].select = false
63         }
64       }
65     }
66 
67     //渲染数据
68     this.setData({
69       monster
70     })
71 
72   },
73 })

WXML

 1 <view class="box">
 2 
 3   <view class="monster_box" wx:for="{{monster}}" wx:for-item="item" wx:for-index="index" wx:key="index">
 4 
 5     <view wx:for="{{item}}" wx:for-item="item2" wx:for-index="index2" wx:key="index2">
 6       <!-- 
 7         class="{{item2.select? 'select':'defult'}}"
 8         三目运算,有item2.select吗?(为true时) 触发左侧样式:否则触发右侧样式 
 9 
10         传值:data-id="{{item2.id}} 绑定事件:bindtap="OnSelect" 接收传入的值
11       -->
12       <view class="{{item2.select? 'select':'defult'}}" data-id="{{item2.id}}" bindtap="OnSelect">{{item2.name}}</view>
13 
14     </view>
15 
16   </view>
17 
18 </view>

WXSS

 1 .monster_box{
 2   display: flex;
 3   text-align: center;
 4   margin: 20rpx;
 5 }
 6 .select{
 7    200rpx;
 8   border-bottom: 5rpx solid rgb(255, 124, 124);
 9   margin: 20rpx;
10 }
11 .defult{
12    200rpx;
13   margin: 20rpx;
14 }

效果图

时间若流水,恍惚间逝去

微信小程序 动态更改选中对象的css样式

微信小程序动态更改选中对象的css样式