逻辑
①给原数据添加选中状态,例如:select:false 和 判断依据:例如 id:1
②wxml页面三目判断例如: class=" {{ xx.select? 'select' : 'defult' }}"
③在wxss页面分别创建select 和 defult 样式
④给对应标签添加事件接受传入的id值,并进行判断,将点击id的select设置为true,其他为false
案例
JS
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 }
效果图
