So implementieren Sie benutzerdefinierte Mehrfachauswahlereignisse im WeChat-Applet

Dieses Mal zeige ich Ihnen, wie Sie ein benutzerdefiniertes Mehrfachauswahl--Ereignis in einem WeChat-Applet implementieren. Welche Vorsichtsmaßnahmen gelten, um ein benutzerdefiniertes Mehrfachauswahl-Ereignis in einem WeChat zu implementieren? Applet? Das Folgende ist: Werfen wir einen Blick auf praktische Fälle. z

Um den Effekt im Bild unten zu erzielen (benutzerdefinierte Mehrfachauswahl-Radioauswahl), werden die Mehrfachauswahlfelder der meisten Unternehmensprojekte selbst entworfen, sodass die Verwendung nativer Tags oder Komponenten nicht möglich ist. Am einfachsten ist es, das Ereignis selbst zu binden und dann zwischen ausgewählten und nicht ausgewählten Bildern zu wechseln. Das Applet kann wie Vue kein DOM bedienen, daher ist es notwendig, den Index des Arrays und das benutzerdefinierte -Attribut zu verwenden, um eine ternäre Beurteilung durchzuführen.

Gehe direkt zum 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:: Ereignisbindung aktuelle Komponente.

Datensatz: In der Komponente können Daten definiert werden, die über Ereignisse an SERVICE übergeben werden. Schreibmethode: Beginnend mit data- werden mehrere Wörter durch Bindestriche verknüpft und dürfen keine Großbuchstaben enthalten (Großbuchstaben werden automatisch in Kleinbuchstaben umgewandelt), wie z. B. data-element-type. Eventuell werden Bindestriche in Kamelbuchstaben umgewandelt event.currentTarget.dataset elementType.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So erstellen Sie eine Webpack+React-Entwicklungsumgebung

Detaillierte Erklärung der Verwendung von Node.js Buffer

Das obige ist der detaillierte Inhalt vonSo implementieren Sie benutzerdefinierte Mehrfachauswahlereignisse im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!