微信小程序中多個button/view組件中進行切換時改變樣式

微信小程序中多個button/view組件中進行切換時改變樣式開發具體教程: 一、微信小程序| 多個按鈕或VIEW，點擊改變狀態 簡易的實現方法 .wxml文件   [html] view plain copy <view class="chose-txt" data-price="{{item.price}}" data-id="{{index}}" bindtap="choseTxtColor" style="{{index == id?'background:url(../resource/button/on_chose.png) right no-repeat; border:1rpx solid #e8580c; color: #e8580c':'baciground:url();border:1rpx solid gainsboro;color:gray'}}"> <text class="chose-p" >{{item.name}}</text> <text class="chose-p" >{{item.price}}元</text> </view> </block> 樣式都在這個文件中寫了，CSS只是控制佈局 .wxss文件   [html] view plain copy .chose-txt{ border-radius: 6px; font-size: 26rpx; height: 40px; width: 27.5%; margin: 5px; float: left;padding-top: 5px; } .chose-p{ line-height: 18px; width: 100%; height:20px; text-align: center; float: left; } .js頁面   [javascript] view plain copy var id ; page{ array: [{ name: '單拍', price: '198'}, { name: '親子套餐', price: '398' }, { name: '活動套餐', price: '598' }, { name: '女王套餐', price: '1198' } ], id:0, //進入頁面時，默認選擇第0個，若是不須要默認選中，註釋掉就能夠了 }, choseTxtColor:function(e){ var id = e.currentTarget.dataset.id; //獲取自定義的ID值 this.setData({ id:id }) }, } } 好了，到這裏已經設置完成了，親測可用。   二、微信小程序中多個button/view組件中進行切換時改變樣式 在小程序項目中遇到一個問題：數據分紅四五個小組，而後要進行小組切換，切換的同時把button的樣式也要改變，之前Dom操做的時候特別簡單， 如今在小程序中竟不知從何下手，後面參照了上面這邊博文，功能也可以實現了，下面作下記錄： 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}} 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: id 6 }); 7 } 結果： 默認爲「所有」：