微信小程序遍历改变当前按钮状态

微信小程序多个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;
}