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


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 相关文章推荐
JavaScript类库D
Oct 24 Javascript
json对象转字符串如何实现
Dec 02 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
JS库之wow.js使用方法
Sep 14 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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新手上路(四)
2006/10/09 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
实例讲解Python爬取网页数据
2018/07/08 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
资产经营总监岗位职责范文
2013/12/01 职场文书
教学实验楼管理制度
2014/02/01 职场文书
啤酒节策划方案
2014/05/28 职场文书
欢迎领导标语
2014/06/27 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python