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

更新時間：2018年05月17日 11:39:31 作者：東西里

本篇文章主要介紹了微信小程序自定義多選事件的實現(xiàn)代碼，小程序和vue一樣是沒法操作dom的，所以要利用數(shù)組的下標和自定義屬性來進行三元判斷，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

直接上代碼：

wxml：

 <view class="sel-box">
   /**用wx:for來進行列表渲染**/
  <view wx:for="{{repContent}}" class="multi-selection">
   <text>{{item.message}}</text>
   /**利用數(shù)組的下標index來進行判斷是哪個的事件**/
   <image src="{{selectIndex[index].sureid? hasSelect : noSelect}}" class="multi-img" data-selectIndex="{{index}}" bindtap="selectRep" />
  </view>
 </view>

js：

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

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

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

currentTarget:：事件綁定的當前組件。

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

開始入門學習小程序的，看官方文檔就好了。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: