微信小程序之多選功能


思路:把向得到的數組中添加一個布爾值,默認都為false,然后通過數組的映射功能把選中的布爾值,存儲到數組中,在組件屬性中,用三元運算符做判斷即可

data:{

sampleArray: [{ id: '0001'}, { id: '0002'}, { id: '0003'}, { id: '0004'}], //樣品數組

}

js代碼:

//頁面加載的時候執行

onLoad(){
let {sampleArray } = this.data;
sampleArray.forEach(x => {
x.selected = false
})
},
//選中數據是執行
select(e){
let that=this;
let { index}=e.currentTarget.dataset;
let currentItem = this.data.sampleArray[index];
let { selectSample}=this.data;
currentItem.select = !currentItem.select
selectSample.concat(selectSample.push(index));
let newArray=selectSample.filter((val,index,arr)=>{
return arr.indexOf(val)==index
})
console.log(newArray)
this.setData({
sampleArray: that.data.sampleArray,
selectSample
})
},
wxml代碼:
<image class="select" src="{{item.select?'/images/zx1.png':'/images/xz2.png'}}"></image>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM