微信小程式多個button做單選操作
阿新 • • 發佈:2019-01-08
//這裡是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
})
},
})
這樣就能實現多個按鈕 只選一個的效果
如果有錯誤的地方請指出來,謝謝