微信小程序实现多选删除列表数据功能示例
129 浏览量
2020-10-17
13:00:48
上传
评论
收藏 54KB PDF 举报
微信小程序实现多选删除列表数据功能示例微信小程序实现多选删除列表数据功能示例
主要介绍了微信小程序实现多选删除列表数据功能,涉及微信小程序列表数据读取、显示、删除等相关操作技巧,需要的朋友可以参考下
本文实例讲述了微信小程序实现多选删除列表数据功能。分享给大家供大家参考，具体如下：
实现小程序一个类似多选列表删除的功能
<!-- 错题本 -->
<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}}'>错误次数</text>
</view>
</view>
</view>
</view>
<view class="footer" wx:if="{{iconStatu}}" bindtap="delItem">
已掌握,移除错题本({{selList.length}})
</view>
</view>
js
// pages/wrongPage/index.js
Page({
/**
* 页面的初始数据
*/
data: {
list: [
{ "id": 0, "letter": "Michael", "statu": true, "nickname": "适北", "nickname2": "路高用" },
{ "id": 1, "letter": "Michael", "statu": false, "nickname": "统常方你", "nickname2": "况土达主" },
{ "id": 2, "letter": "Michael", "statu": true, "nickname": "国照而本", "nickname2": "温量" },
{ "id": 3, "letter": "Michael", "statu": true, "nickname": "省全广", "nickname2": "正关水" },
{ "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": "命构近九", "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,
},
/**
* 生命周期函数--监听页面加载
*/
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
})
资源评论
