1、微信小程序 | 多個按鈕或VIEW，點擊改變狀態 簡易的實現方法

.wxml文件

1. [html] view plain copy
2. <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'}}">
3. <text class="chose-p" >{{item.name}}</text>
4. <text class="chose-p" >{{item.price}}元</text>
5. </view>
6. </block>

樣式都在這個文件中寫了，CSS只是控制布局

.wxss文件

1. [html] view plain copy
2. .chose-txt{
3. border-radius: 6px; font-size: 26rpx; height: 40px; width: 27.5%; margin: 5px; float: left;padding-top: 5px;
4. }
5. .chose-p{
6. line-height: 18px; width: 100%; height:20px; text-align: center; float: left;
7. }

.js頁面

1. [javascript] view plain copy
2. var id ;
3. page{
4. array: [{ name: '單拍', price: '198'}, { name: '親子套餐', price: '398' }, { name: '活動套餐', price: '598' }, { name: '女王套餐', price: '1198' } ],
5. id:0, //進入頁面時，默認選擇第0個，如果不需要默認選中，注釋掉就可以了
6. },
7. choseTxtColor:function(e){
8. var id = e.currentTarget.dataset.id; //獲取自定義的ID值
9. this.setData({
10. id:id
11. })
12. },
13. }
14. }

好了，到這里已經設置完成了，親測可用。

 

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

在小程序項目中遇到一個問題：數據分成四五個小組，然后要進行小組切換，切換的同時把button的樣式也要改變，以前Dom操作的時候特別簡單，

現在在小程序中竟不知從何下手，后面參照了上面這邊博文，功能也能夠實現了，下面做下記錄：

wxml代碼：

1. 1 <view wx:for="{{Object}}" wx:key="Object" wx:for-index="key" wx:for-item="value">
2. 2 <view class="flex-item">
3. 3 <button bindtap="changeGroup" data-groupid="{{value.id}}" data-id="{{key}} type="{{key == id ? 'primary' : 'default'}}"> {{value.name}}
4. 4
5. 5

css代碼：

1. 1 .flex-item button {
2. 2 height: 32px;
3. 3 box-sizing: border-box;
4. 4 text-align: center;
5. 5 margin: 10px 0 0 0;
6. 6 min-width: 50px;
7. 7 font-size: 16px;
8. 8 line-height: 32px;
9. 9 }

js代碼：

1. 1 data：{
2. 2 id:''
3. 3 }

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

結果：

默認為“全部”：