How to implement custom multi-select events in WeChat applet

This time I will show you how to implement the custom multi-selection event of the WeChat applet Event, implement the custom multi-selection event of the WeChat applet What are the precautions, here are Let’s take a look at practical cases. z

To achieve the effect in the picture below (customized multi-select radio selection), the multi-select boxes of most company projects are designed by themselves, so it is not feasible to use native tags or components. The simplest is Bind the event yourself, and then switch between selected and unselected pictures. The applet, like vue, cannot operate DOM, so it is necessary to use the array subscript and custom attributes to make ternary judgments.

Go directly to the code:

wxml：

 <view class="sel-box">
   /**用wx:for来进行列表渲染**/
  <view wx:for="{{repContent}}" class="multi-selection">
   <text>{{item.message}}</text>
   /**利用数组的下标index来进行判断是哪个的事件**/
   <image src="{{selectIndex[index].sureid? hasSelect : noSelect}}" class="multi-img" data-selectIndex="{{index}}" bindtap="selectRep" />
  </view>
 </view>

js：

Page({
 /**
  * 页面的初始数据
  */
 data: {
  noSelect: 'https://xxxxx/ic_report_nor@2x.png',
  hasSelect: 'https://xxxxx/ic_check_ele@2x.png',
  repContent: [{ message: '广告内容' }, { message: '不友善内容' }, { message: '垃圾内容' }, { message: '违法违规内容' }, { message: '其他' }],
  selectIndex: [
   { sureid: false },
   { sureid: false },
   { sureid: false },
   { sureid: false },
   { sureid: false },
  ],
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
 
 },
 selectRep:function(e){
  let index = e.currentTarget.dataset.selectindex; //当前点击元素的自定义数据，这个很关键
  let selectIndex = this.data.selectIndex;  //取到data里的selectIndex
  selectIndex[index].sureid = !selectIndex[index].sureid;  //点击就赋相反的值
  this.setData({
   selectIndex: selectIndex  //将已改变属性的json数组更新
  })
 }
})

currentTarget:: event binding current component.

dataset: Data can be defined in the component, which will be passed to SERVICE through events. Writing method: Start with data-, multiple words are linked by hyphens -, and cannot contain uppercase letters (uppercase letters will be automatically converted to lowercase letters) such as data-element-type. Finally, hyphens will be converted to camel case in event.currentTarget.dataset elementType.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to build a webpack react development environment

Detailed explanation of Node.js Buffer usage

The above is the detailed content of How to implement custom multi-select events in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!