微信小程序多个button同一事件操作
遍历未知个数button中,如何改变当前所点击按钮的状态,或修改button文本
效果图
introduce
- 遍历button,在button上绑定事件
- 点击当前button时禁用,或修改样式
- 如果后台没有返回数据中没有 标识禁用属性 可自行添加
wxml
<view wx:for="{{list}}" wx:key="*this">
<button class='testT' bindtap='testButtonTap' data-index="{{index}}" disabled="{{item.testDisabled}}">
<text>开始测量</text>
</button>
</view>
js
data: {
list: [
{
testDisabled: false, //标识是否禁用
},
{
testDisabled: false,
},
{
testDisabled: false,
}
],
},
onLoad: function() {
//例: 如果后台没有返回修改文本属性, 可遍历添加 , 点击当前时改变文本
for (var i = 0; i < this.data.list.length; i++) {
list[i]["flagText"] = '开始测量';
}
},
/**
* 遍历判断当前下标相等时,禁用当前button
*/
testButtonTap: function(e) {
var that = this;
console.log('点击我了');
let currentIndex = e.currentTarget.dataset.index;
this.data.list.forEach((item, i) => {
// console.log(item);
if (Number(i) == currentIndex) {
var setDisabled = "list[" + i + "].testDisabled";
var setTxt = "list[" + i + "].flagText";
that.setData({
[setDisabled]: "true", //禁用button
[setTxt]: "获取成功" //修改button文本
})
}
})
},
wxss(可选)
button {
&::after{
border: none;
}
outline: none;
@include sc(30rpx, $white);
@include borderRadius(34rpx);
height: 68rpx;
line-height: 68rpx;
background: linear-gradient(-90deg,
#3f98fd 0%,
#68f1da 99%);
}
button[disabled] {
color: #ccc !important;
background: #ededed !important;
}