微信小程序中多个button/view组件中进行切换时改变样式

在小程序项目中遇到一个问题：数据分成四五个小组，然后要进行小组切换，切换的同时把button的样式也要改变，以前Dom操作的时候特别简单，

现在在小程序中竟不知从何下手，后面参照了这边博文：http://blog.csdn.net/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：{
2     id:''
3 }

1 changeGroup: function(event){
2     var id = event.currentTarget.dataset.id;
3     .....
4    this.setData({
5          id: id
6    });
7 }

结果：

默认为“全部”：

 

可任意切换其他button：

 

另外，值得注意的是，从数据库里面取出的数据并没有"全部"这一个对象，而是在请求数据成功之后再添加进去，并且这个对象的下标为是0，这样的设置默认button的样式比较好定义

代码参考：

 1   changeGroup: function(event){
 2     var Object = []; 
 3     wx.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){
11               var obj = {};
12               obj.id = '';
13               obj.name = '全部';
14               Object.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 }

好了。。。

转载于:https://www.cnblogs.com/yeanet/p/7170336.html