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

现在在小程序中竟不知从何下手，后面参照了这边博文：，功能也能够实现了，下面做下记录：

 wxml代码：

1    
     
      2       
      
       3              
        {
   {value.name}}4       
      5   
     

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: id6    });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

好了。。。