若有更好的方法實現,能夠留言或加羣交流學習。謝謝(交流QQ羣:604788754)html
WXML:學習
<block wx:for="{{datanum}}" wx:for-index="idx" wx:for-item='item'> <view class="classname" id="{{idx}}" bindtap="curchange"> <view class="boxs">{{item.datas}}</view> <view wx:if="{{item.toggle==true}}" class="boxs">{{idx}}</view> </view> </block>
WXSS:this
.classname{ background-color: red; width: 200px; margin-top: 50px; } .boxs{ width: 100px; height: 50px; background-color: #188eee; line-height: 50px; text-align: center; color: #fff; margin-bottom: 10px; }
JS:htm
Page({ data:{ datanum:[ { datas:11 }, { datas: 22 }, { datas: 333 } ] }, onLoad:function(){ var datanum=this.data.datanum; for (var i = 0; i < datanum.length; i++) { datanum[i]['toggle'] = false; //添加toggle 屬性 }; this.setData({ datanum: datanum }); }, curchange:function(event){ var id = event.currentTarget.id; var toggle = this.data.datanum[id]['toggle']; if(toggle==false){ this.data.datanum[id]['toggle'] = true; }else{ this.data.datanum[id]['toggle'] = false; }; this.setData({ datanum: this.data.datanum }); } });
效果圖以下:blog