Wechat applet is bound to a dynamic array to implement a custom radio box (after clicking the button, disable the button and enable other buttons)

Notes ：

Recently, I am learning wechat applet and participating in my own embedded control project , The front end doesn't know much , Encountered many problems , Right here , Take notes piecemeal .

Here is how to use the wechat applet WXML Tag binding JS The array in can control the batch of keys in the loop .

1、 Implement dynamic binding

First, let's take a look at how a single key is dynamically bound , adopt { { Variable name }} The form will be JS The variables in are passed to the corresponding attributes

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

Corresponding JS Code , Here and standard JavaScript The difference is that you can't use

document.getElementById("p1").innerHTML=" New text !"; To get the corresponding HTML Node information in , And get permission to modify , And you want to use setData（） function , The reference codes are as follows .

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

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

2、 Implement array dynamic binding

In the form of an array JS In the definition of disable:[{}], stay WXML Reference... In tag attribute , Because it is very small here , The events that took a long time to click with the three buttons are Button_1 Here is just a demonstration of a button pressed , Other buttons disable Property changed to false, The other buttons are enabled , Similar to radio buttons .

Can be applied to " Start connecting "—>" disconnect "—>“ End of service " And other procedural button operations .

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

In the wechat app JS There are some standards in the JS Different grammar , The wechat applet development team may be considering some factors , Some of the writing has been modified , But if you master it, you can still use it very well .

Page({
  data: {
    disabled:[
      {value:false,},{value:true},{value:true},//***** The point *****//
    ]
    },

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

stay JS There are two points to note in ：let temp = 'diasbled['+i+'].value', I have used string connection disable[i].value and WXML As called in , But because of setData This form is not allowed in , So we have to define a temporary variable to assume the name reference function , Then use the same temp:false To operate .

Array of disable stay data:{} Pay attention to the syntax when defining , I'm through i Do it directly index Indexed .

In addition, there is a very deep pit , That is, if the keyword has no other color on the table , The following figure id3 hinder value:ture It's a mistake , He doesn't think so ture The definition of .

——————

I hope the notes are helpful to you ！