真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

微信小程序自定義多選事件的實(shí)現(xiàn)代碼

要實(shí)現(xiàn)下圖的效果（自定義多選單選），大多數(shù)公司項(xiàng)目的多選框都是自己設(shè)計(jì)的，所以用原生標(biāo)簽或者組件是不可行的，最簡(jiǎn)單的是自己綁定事件，然后切換選擇和未選擇的圖片。而小程序和vue一樣是沒(méi)法操作dom的，所以要利用數(shù)組的下標(biāo)和自定義屬性來(lái)進(jìn)行三元判斷。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序制作、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了周村免費(fèi)建站歡迎大家使用！

直接上代碼：

wxml：

 
   /**用wx:for來(lái)進(jìn)行列表渲染**/
  
   {{item.message}}
   /**利用數(shù)組的下標(biāo)index來(lái)進(jìn)行判斷是哪個(gè)的事件**/

js：

Page({
 /**
  * 頁(yè)面的初始數(shù)據(jù)
  */
 data: {
  noSelect: 'https://xxxxx/ic_report_nor@2x.png',
  hasSelect: 'https://xxxxx/ic_check_ele@2x.png',
  repContent: [{ message: '廣告內(nèi)容' }, { message: '不友善內(nèi)容' }, { message: '垃圾內(nèi)容' }, { message: '違法違規(guī)內(nèi)容' }, { message: '其他' }],
  selectIndex: [
   { sureid: false },
   { sureid: false },
   { sureid: false },
   { sureid: false },
   { sureid: false },
  ],
 },

 /**
  * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
  */
 onLoad: function (options) {
 
 },

 selectRep:function(e){
  let index = e.currentTarget.dataset.selectindex; //當(dāng)前點(diǎn)擊元素的自定義數(shù)據(jù)，這個(gè)很關(guān)鍵
  let selectIndex = this.data.selectIndex;  //取到data里的selectIndex
  selectIndex[index].sureid = !selectIndex[index].sureid;  //點(diǎn)擊就賦相反的值
  this.setData({
   selectIndex: selectIndex  //將已改變屬性的json數(shù)組更新
  })
 }
})

currentTarget:：事件綁定的當(dāng)前組件。

dataset：在組件中可以定義數(shù)據(jù)，這些數(shù)據(jù)將會(huì)通過(guò)事件傳遞給 SERVICE。書寫方式：以data-開頭，多個(gè)單詞由連字符-鏈接，不能有大寫(大寫會(huì)自動(dòng)轉(zhuǎn)成小寫)如data-element-type，最終在 event.currentTarget.dataset 中會(huì)將連字符轉(zhuǎn)成駝峰e(cuò)lementType。

開始入門學(xué)習(xí)小程序的，看官方文檔就好了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)頁(yè)名稱：微信小程序自定義多選事件的實(shí)現(xiàn)代碼
鏈接URL：http://weahome.cn/article/iigpds.html