实现小程序一个类似多选列表删除的功能
<!-- 错题本 --> <view> <view> <view> <view>错题本(<text>{{list.length}}</text>)题</view> <view bindtap="showSelIcon">{{iconStatu?'取消':'编辑'}}</view> </view> <view> <view bindtap="toggleSel" wx:for="{{list}}" wx:key="{{index}}" data-id='{{item.id}}'> <view 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 data-id='{{item.id}}'>23</text> <text data-id='{{item.id}}'>错误次数</text> </view> </view> </view> </view> <view 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 }) }, // 删除错题 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: [], }) } })
css
@import "../../css/common.wxss"; .content { padding: 20rpx 30rpx; } .title { font-size: 40rpx; color: #fff; padding-bottom: 37rpx; } .title .editBtn { font-size: 30rpx; } .item { box-sizing: border-box; width: 100%; background-color: #464688; border-radius: 10rpx; padding: 40rpx 30rpx; margin-top: 20rpx; } .item icon { margin-right: 20rpx } .item text { display: block; font-size: 28rpx; color: #fff; } .item .wrongCount { font-size: 36rpx; font-family: "PingFang SC"; color: rgb(255, 216, 80); text-align: center; } .item .wrongText { font-size: 22rpx; font-family: "PingFang SC"; color: rgb(100, 98, 173); text-align: center; } .footer { position: fixed; bottom: 0; background-color: #fff; width: 100%; height: 100rpx; line-height: 100rpx; text-align: center; } .margin-b { margin-bottom: 100rpx; } page { height: 100%; display: block; background-attachment: fixed; background:#000; /* min-height: 100%; */ } /* 头像 */ .head { width: 136rpx; height: 136rpx; border-radius: 50%; border: 2rpx solid #ffbf50; } .hide { display: none!important; } /* 清除浮动 */ .clearfix:after{ content: ' '; display: block; clear: both; visibility:hidden; line-height: 0; height:0; } /* flex类名 */ /* 定义 */ .flex-def { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;} /* 主轴居中 */ .flex-zCenter { -webkit-box-pack: center; -moz-justify-content: center; -webkit-justify-content: center; justify-content: center; } /* 主轴两端对齐 */ .flex-zBetween { -webkit-box-pack: justify; -moz-justify-content: space-between; -webkit-justify-content: space-between; justify-content: space-between; } /* 主轴end对齐 */ .flex-zEnd { -webkit-box-pack: end; -moz-justify-content: flex-end; -webkit-justify-content: flex-end; justify-content: flex-end; } /* 主轴start对齐 */ .flex-zStart { -webkit-box-pack: start; -moz-justify-content: start; -webkit-justify-content: start; justify-content: start; } .flex-zSpace { justify-content: space-around } /* 侧轴居中 */ .flex-cCenter { -webkit-box-align: center; -moz-align-items: center; -webkit-align-items: center; align-items: center; } /* 侧轴start对齐 */ .flex-cStart { -webkit-box-align: start; -moz-align-items: start; -webkit-align-items: start; align-items: start; } /* 侧轴底部对齐 */ .flex-cEnd { -webkit-box-align: end; -moz-align-items: flex-end; -webkit-align-items: flex-end; align-items: flex-end; } /* 侧轴文本基线对齐 */ .flex-cBaseline { -webkit-box-align: baseline; -moz-align-items: baseline; -webkit-align-items: baseline; align-items: baseline; } /* 侧轴上下对齐并铺满 */ .flex-cStretch { -webkit-box-align: stretch; -moz-align-items: stretch; -webkit-align-items: stretch; align-items: stretch; } /* 主轴从上到下 */ .flex-zTopBottom { -webkit-box-direction: normal; -webkit-box-orient: vertical; -moz-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } /* 主轴从下到上 */ .flex-zBottomTop { -webkit-box-pack: end; -webkit-box-direction: reverse; -webkit-box-orient: vertical; -moz-flex-direction: column-reverse; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; } /* 主轴从左到右 */ .flex-zLeftRight { -webkit-box-direction: normal; -webkit-box-orient: horizontal; -moz-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; } /* 主轴从右到左 */ .flex-zRightLeft { -webkit-box-pack: end; -webkit-box-direction: reverse; -webkit-box-orient: horizontal; -moz-flex-direction: row-reverse; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; } /* 是否允许子元素伸缩 */ .flex-item { -webkit-box-flex: 1.0; -moz-flex-grow: 1; -webkit-flex-grow: 1; flex-grow: 1; } .flex-wrap { flex-wrap: wrap; } /* 加号 */