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


Posted in Javascript onJanuary 15, 2019

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

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

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

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

Javascript 相关文章推荐
一实用的实现table排序的Javascript类库
Sep 12 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
Feb 06 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 #Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 #Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 #Javascript
详解从react转职到vue开发的项目准备
Jan 14 #Javascript
node全局变量__dirname与__filename的区别
Jan 14 #Javascript
微信小程序时间轴实现方法示例
Jan 14 #Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 #Javascript
You might like
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
yii分页组件用法实例分析
2015/12/28 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
Python配置文件处理的方法教程
2019/08/29 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
Python如何定义有默认参数的函数
2020/08/10 Python
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
医学院毕业生自荐信
2013/11/08 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
情侣吵架检讨书
2014/02/05 职场文书
岗位聘任书范文
2014/03/29 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
python+opencv实现视频抽帧示例代码
2021/06/11 Python
Redis入门教程详解
2021/08/30 Redis