1. 程式人生 > >微信小程式多個button做單選操作

微信小程式多個button做單選操作

//這裡是wxml程式碼

<block wx:for="{{yearLabel}}">

<button class="{{item.select==yearShow?'b':'a'}}" data-texe="{{item.context}}" data-select='{{item.select}}'

bindtap='getYearLabel'>//這裡的b或者a是這個button未選中和選中的樣式

{{item.context}}

</button>

</block>

//js

page({

data:{

yearLabel:[

{ context: "滿五唯一", select: 1 },

{ context: "滿五年", select: 2},

{ context: "滿3年", select: 3},

{ context: "滿2年", select: 4},

{ context: "滿6年", select: 5},

],

},

getYearLabel:function(e){

var that = this

var yearLabel = that.data.yearLabel

that.setData({//更新到data裡面

yearShow: e.currentTarget.dataset.select,

yearLabel: that.data.yearLabel

})

},

})

這樣就能實現多個按鈕 只選一個的效果

如果有錯誤的地方請指出來,謝謝