在小程序项目中遇到一个问题:数据分成四五个小组,然后要进行小组切换,切换的同时把button的样式也要改变,以前Dom操作的时候特别简单,
现在在小程序中竟不知从何下手,后面参照了这边博文:/kelisentian/article/details/72793158,功能也能够实现了,下面做下记录:
wxml代码:
1 <view wx:for="{{Object}}" wx:key="Object" wx:for-index="key" wx:for-item="value">2 <view class="flex-item">3 <button bindtap="changeGroup" data-groupid="{{value.id}}" data-id="{{key}} type="{{key == id ? 'primary' : 'default'}}"> {{value.name}}</button>4 </view>5 </view>
css代码:
1 .flex-item button {2 height: 32px;3 box-sizing: border-box;4 text-align: center;5 margin: 10px 0 0 0;6 min-width: 50px;7 font-size: 16px;8 line-height: 32px;9 }
js代码:
1 data:{2id:''3 }
1 changeGroup: function(event){2var id = event.currentTarget.dataset.id;3.....4 this.setData({5id: id6 });7 }
结果:
默认为“全部”:
可任意切换其他button:
另外,值得注意的是,从数据库里面取出的数据并没有"全部"这一个对象,而是在请求数据成功之后再添加进去,并且这个对象的下标为是0,这样的设置默认button的样式比较好定义
代码参考:
1 changeGroup: function(event){ 2var Object = []; 3wx.request({ 4 url:'', 5 header:{}, 6 data:{}, 7 method:"", 8 success: function(res){ 9 if(res.data.state == 'success'){10 if(res.data.group.length >0){11var obj = {};12obj.id = '';13obj.name = '全部';14Object.push(obj);15 }16 for(var i = 0; i<res.data.group.length; i++){17 var o= {}; o.id = res.data.group[i].id;18 o.name = res.data.group[i].name;19 Object.push(o);20 }21 that.setData({22 Object: Object,23 });24}25 })26 }
好了。。。