微信小程序实现多选删除列表数据功能示例

<!-- 错题本 --><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>

// pages/wrongPage/index.jsPage({ /**  * 页面的初始数据  */ 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: [],    })  }})

@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; }/* 加号 */