本文實例講述了微信小程序?qū)崿F(xiàn)多選刪除列表數(shù)據(jù)功能。分享給大家供大家參考,具體如下:
實現(xiàn)小程序一個類似多選列表刪除的功能
<!-- 錯題本 --><view class="contarner"> <view class="content"> <view class="title flex-def flex-cCenter flex-zBetween"> <view>錯題本(<text>{{list.length}}</text>)題</view> <view class="editBtn" bindtap="showSelIcon">{{iconStatu?'取消':'編輯'}}</view> </view> <view class="{{iconStatu?'margin-b':''}}"> <view bindtap="toggleSel" class="item flex-def flex-cCenter flex-zBetween" wx:for="{{list}}" wx:key="{{index}}" data-id='{{item.id}}'> <view class="flex-def flex-cCenter flex-zBetween" data-id='{{item.id}}'> <icon wx:if="{{iconStatu}}" type="success" size="20" color="{{item.selStatu?'#0f0':'#999'}}" data-id='{{item.id}}' /> <view data-id='{{item.id}}'> <text data-id='{{item.id}}'>{{item.letter}}-</text> <text data-id='{{item.id}}'>正確:{{item.nickname}}</text> </view> </view> <view data-id='{{item.id}}'> <text class="wrongCount" data-id='{{item.id}}'>23</text> <text class="wrongText" data-id='{{item.id}}'>錯誤次數(shù)</text> </view> </view> </view> </view> <view class="footer" wx:if="{{iconStatu}}" bindtap="delItem"> 已掌握,移除錯題本({{selList.length}}) </view></view>js
// pages/wrongPage/index.jsPage({ /** * 頁面的初始數(shù)據(jù) */ data: { list: [ { "id": 0, "letter": "Michael", "statu": true, "nickname": "適北", "nickname2": "路高用" }, { "id": 1, "letter": "Michael", "statu": false, "nickname": "統(tǒng)常方你", "nickname2": "況土達主" }, { "id": 2, "letter": "Michael", "statu": true, "nickname": "國照而本", "nickname2": "溫量" }, { "id": 3, "letter": "Michael", "statu": true, "nickname": "省全廣", "nickname2": "正關(guān)水" }, { "id": 4, "letter": "Michael", "statu": false, "nickname": "十性位化", "nickname2": "選低離" }, { "id": 5, "letter": "Michael", "statu": true, "nickname": "織起", "nickname2": "叫意" }, { "id": 6, "letter": "Michael", "statu": true, "nickname": "已太邊", "nickname2": "與今壓" }, { "id": 7, "letter": "Michael", "statu": true, "nickname": "石情聲", "nickname2": "馬法該無" }, { "id": 8, "letter": "Michael", "statu": true, "nickname": "青例氣", "nickname2": "先素有" }, { "id": 9, "letter": "Michael", "statu": true, "nickname": "或少", "nickname2": "無格歷何" }, { "id": 10, "letter": "Michael", "statu": true, "nickname": "命構(gòu)近九", "nickname2": "幾被非外" }, { "id": 11, "letter": "Michael", "statu": true, "nickname": "拉物采", "nickname2": "價分斗" }, { "id": 12, "letter": "Michael", "statu": true, "nickname": "教斗適立", "nickname2": "算非音" }, { "id": 13, "letter": "Michael", "statu": true, "nickname": "歷治", "nickname2": "相五" }, { "id": 14, "letter": "Michael", "statu": true, "nickname": "是治際", "nickname2": "你表手" }, ] , selColor: '#999', selList: [], iconStatu: false, }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function (options) { let dataList = this.data.list; dataList.map(function (value) { value.selStatu = false; }) }, // 選中 toggleSel(e) { if (this.data.iconStatu) { let selArr = this.data.selList; let selId = e.target.dataset.id || e.currentTarget.dataset.id; let dataList = this.data.list; let index = this.data.selList.indexOf(selId); if (index < 0) { selArr.push(e.target.dataset.id); dataList.map((value) => { if (value.id == selId) { value.selStatu = true } }) } else { dataList.map((value) => { if (value.id == selId) { value.selStatu = false } }) selArr.splice(index, 1) } this.setData({ selList: selArr, list: dataList }) } }, showSelIcon() { this.setData({ iconStatu: !this.data.iconStatu }) }, // 刪除錯題 delItem() { let arr = this.data.list; let selArr = this.data.selList; for (let i = 0; i < selArr.length; i++) { arr = arr.filter((value,index) => { return value.id != selArr[i] }) } for (let i = 0; i < arr.length; i++) { arr[i].selStatu = false } this.setData({ list: arr, selList: [], }) }})
新聞熱點
疑難解答