Wechat applet -- implementation of radio check button group

This paper mainly introduces the implementation of many radio buttons in wechat applet. As we all know, the applet can't bind the DOM intercept at present. The principle of implementation is to get the data ID through the event method of bindtap click and loop through it to achieve this effect.

(1) Radio button group

The model diagram is as follows:

index.js

Page({
  data: {
    parameter: [{ id: 1, name: 'silvery' }, { id: 2, name: 'white' },{ id: 3, name: 'black' }],//Simulate product parameter data. If it is an online version, you need to initiate a request by yourself
  },
  onLoad: function (options) {
     this.data.parameter[0].checked = true;
    this.setData({
      parameter: this.data.parameter,
    })//The first object of the default parameter array is selected
  },
   // Parameter click response event
  parameterTap:function(e){//e is getting e currentTarget.dataset.id So it's necessary. It's similar to the front-end data ID acquisition
    var that=this
    var this_checked = e.currentTarget.dataset.id
    var parameterList = this.data.parameter//Get Json array
    for (var i = 0; i < parameterList.length;i++){
      if (parameterList[i].id == this_checked){
        parameterList[i].checked = true;//If the current click position is true, it is selected
      }
      else{
        parameterList[i].checked = false;//Other locations are false
      }
    }
    that.setData({
      parameter: parameterList
    })
  }
})

index.xml

<view class='fwb fz-28 mgt-16 mgb-10'>Specifications</view>
  <view class='parameter-wrap'>
    <block wx:for="{{parameter}}" wx:key="parameter">
    <text class='parameter-info text-over {{item.checked?"checked_parameter":""}}' data-id='{{item.id}}' bindtap='parameterTap'>{{item.name}}</text>
    </block>
  </view>

Tips: here{{ item.checked? ”checked_parameter: '}} is a ternary selector, that is, to judge whether the current style is selected by checked, and then add checked style_ parameter.

(2) Multi select button group

The model diagram is as follows:

cartList.js

Page({
    data:{
    CartList:[],//Short processing. If the value of the back end of the shopping cart is empty, it is easy to generate an error
    },
      onLoad: function () {
    // Get cart request
    var that = this;
    wx.request({
      url: request_getCartList,//Send a request to the back end. Here is the get method. If you need ajax, please refer to the relevant articles in this website
      data: {
        "session3rd": userid,
      },
      success: function (res) {
        if (res.data.code == -2) {
          that.setData({
            CartList: []
          })
        }
        if(res.data.code==1){
          that.setData({
            CartList: list
          })
         }
       }
    })
  },
    // Multiple choice
  chooseOs: function (event) {
    for (var i = 0; i < this.data.CartList.length; i++) {
      if (event.currentTarget.id == this.data.CartList[i].id) {
        if (this.data.CartList[i].checked == true) {
          this.data.CartList[i].checked = false;
          var CartList = this.data.CartList;
          this.setData({
            CartList//Redefining CartList to refresh the style of shopping cart locally
          })
        } else {
          this.data.CartList[i].checked = true;
          var CartList = this.data.CartList;
          this.setData({
            CartListt//Redefining CartList to refresh the style of shopping cart locally
          })
        }
      }
    }
  },
})

cart.xml

  <block wx:for="{{CartList}}" wx:key="">
    <view class="order-out user-shadow mgb-20 nowrap">
      <view class="check-btn" catchtap='chooseOs' id="{{item.id}}">
        <image class="absoult-v" src="{{imgSrc}}{{item.checked?'type_1':'type_0'}}.png" mode="widthFix"></image>
      </view>

    </view>
  </block>

Tips: the front-end page calls the chooseOs method through catchtap event capture to obtain the ID of the currently clicked object, i.e. id = "{{ item.id }}", and then add styles to the selected events this.data.CartList[i].checked = true;, delete styles for unchecked events this.data.CartList[i].checked = false;

(3) Check to expand - select all and not select all

cart.xml

 <view class="all-btn" bindtap='allCheckTap' wx:if="{{!checked}}">
    <image src="{{imgSrc}}{{checked?'type_1':'type_0'}}.png" mode="widthFix"></image>
    <text>Select all</text>
  </view>

  <view class="all-btn" bindtap='allCheckTap' wx:if="{{checked}}">
    <image src="{{imgSrc}}{{checked?'type_1':'type_0'}}.png" mode="widthFix"></image>
    <text>No choice</text>
  </view>

Tips:Here'Select all'and'No choice'There is no merger. Small farmers need to integrate themselves.
cartList.js

// Select all button
  allCheckTap: function () {
    this.setData({
      checked: !this.data.checked,
    })
    if (this.data.checked) {
      for (var i = 0; i < this.data.CartList.length; i++) {
        if (this.data.CartList[i].checked !== true) {
          this.data.CartList[i].checked = true;
          var CartList = this.data.CartList;
          this.setData({
            CartList
          })
        }
      }
    }
    else {
      for (var i = 0; i < this.data.CartList.length; i++) {
        if (this.data.CartList[i].checked == true) {
          this.data.CartList[i].checked = false;
          var CartList = this.data.CartList;
          this.setData({
            CartList
          })
        }
      }
    }
  },

tips: the logic of selecting all and not selecting all is simple, that is, traversing all checked loops this.data.CartList[i].checked == true or false, and then pass this.setData({CartList}) redefine it to implement local refresh.

Tags: xml JSON

Posted on Fri, 22 May 2020 12:14:19 -0400 by immobilarity