Javascript

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

本文主要是介绍微信小程序实现多选删除列表数据功能示例，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

本文实例讲述了微信小程序实现多选删除列表数据功能。分享给大家供大家参考，具体如下：

实现小程序一个类似多选列表删除的功能

<!-- 错题本 -->
<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
    })
  },
  // 删除错题
  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; }
/* 加号 */

希望本文所述对大家微信小程序开发有所帮助。

这篇关于微信小程序实现多选删除列表数据功能示例的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航