內(nèi)容導讀

要實現(xiàn)下圖的效果（自定義多選單選），大多數(shù)公司項目的多選框都是自己設(shè)計的，所以用原生標簽或者組件是不可行的，最簡單的是自己綁定事件，然后切換選擇和未選擇的圖片。而小程序和vue一樣是沒法操作dom的，所以要利用數(shù)組的下標和自定義屬性來進行三元判斷。currentTarget ：事件綁定的當前組件。dataset ：在組件中可以定義數(shù)據(jù)，這些數(shù)據(jù)將會通過事件傳遞給 SERVICE。書寫方式： 以data-開頭，多個單詞由連字符-鏈接，不能有大寫(大寫會自動轉(zhuǎn)成小寫)如data-element-type，最終在 event.currentTarget.dataset 中會將連字符轉(zhuǎn)成駝峰elementType。

這是我第6篇簡書。

要實現(xiàn)下圖的效果（自定義多選單選），大多數(shù)公司項目的多選框都是自己設(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: '廣告內(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)聽頁面加載 */ onLoad: function (options) { }, selectRep:function(e){ let index = e.currentTarget.dataset.selectindex; //當前點擊元素的自定義數(shù)據(jù)，這個很關(guān)鍵 let selectIndex = this.data.selectIndex; //取到data里的selectIndex selectIndex[index].sureid = !selectIndex[index].sureid; //點擊就賦相反的值 this.setData({ selectIndex: selectIndex //將已改變屬性的json數(shù)組更新 }) }})

二. 自定義單選

實際上是組件id、自定義id配合數(shù)組下標index的應用：

wsml:

<view class="sel-box"> <view wx:for="{{repContent}}" class="multi-selection"> <text>{{item.message}}</text> <image src="{{index == id? hasSelect : noSelect}}" data-id="{{index}}" class="multi-img" bindtap="selectRep" /> </view> </view>

js:

selectRep:function(e){ var ids = e.currentTarget.dataset.id; //獲取自定義的id this.setData({ id: ids //把獲取的自定義id賦給當前組件的id(即獲取當前組件) }) },

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

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

id：當前組件的id
 

微信小程序制作找小貓科技