微信小程序绑定动态数组，实现自定义单选框（点击按钮后禁用该按钮并启用其他按钮）

小记：

近期在学习微信小程序参与一个自己的嵌入式控制项目，前端所了解的不深，遇到好些问题，就在这里，零零碎碎做一些笔记。

下面就微信小程序使用WXML标签绑定JS中的数组实现的可在循环中控制批量的按键。

1、实现动态绑定

首先来看看单个按键如何动态绑定，通过{{变量名}}的形式将JS中的变量传递给对应属性

<view>
<button disabled="{{disabled}}" bindtap="Button_1">按钮1</button>
</view>

对应的JS代码，这里和标准的JavaScript不同的是不可以使用

document.getElementById("p1").innerHTML="新文本!";的方式获取到对应HTML中的节点信息，并获得修改的权限，而要使用setData（）函数，参考代码如下。

Page({
  data: {
    disabled:false,
    },

  Button_1(){
    this.setData({
      disabled:false，
    })
  },
})

2、实现数组动态绑定

使用数组的形式在JS中定义disable:[{}]，在WXML标签属性中引用，这里由于很小白，摸索了好久才会使用三个按钮点击的事件分别是Button_1这里只演示一个按钮按下后，其他按钮的disable属性修改为false，即启用其他按钮，类似于单选按钮一样。

可适用于"开始连接"—>"断开连接"—>“结束服务"等流程化的按钮操作。

<view>
<button disabled="{{disabled[1].value}}" bindtap="Button_1">按钮1</button>
<button disabled="{{disabled[2].value}}" bindtap="Button_2">按钮2</button>
<button disabled="{{disabled[3].value}}" bindtap="Button_3">按钮3</button>
</view>

在微信小程序的JS中存在一些与标准JS不一样的语法，可能是微信小程序开发团队处于某些因素考虑，修改了部分写法，但如果掌握了还是可以挺好用的。

Page({
  data: {
    disabled:[
      {value:false,},{value:true},{value:true},//*****重点哦*****//
    ]
    },

    Button_1(){
    for(let i = 2; i <= 3;i++)
    let temp = 'diasbled['+i+'].value'//*****重点哦*****//
    this.setData({
      temp:false
    }),
})

在JS中需要注意的有两点：let temp = 'diasbled['+i+'].value'，使用过字符串连接的方式吧disable[i].value和WXML中调用的一样，但由于setData中不允许有这种形式出现，所以只好定义一个临时变量承担这个名称指代作用，然后相同的使用temp:false来操作。

数组的disable在data:{}定义的时候的语法也要注意一下，我是通过i直接做index索引的。

另外还有一个很坑很坑的坑，就是如果关键词没有表上其他的颜色，如下图的id3后面的value:ture是会报错的，他认为是没有ture的定义。

——————

希望小记对你有所帮助哦！