微信小程序全选多选效果实现代码解析


Posted in Javascript onJanuary 21, 2020

这篇文章主要介绍了微信小程序全选多选效果实现代码解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

效果图:

微信小程序全选多选效果实现代码解析

wxml代码:

<view class="memberList">
 <view class="allSelect_box" bindtap='selectAll'>
  <checkbox class="checkbox" checked="{{selectilall}}"/>
  <text class="allSelect">全选</text>
 </view>
 <view wx:for="{{list}}">
  <view class="member_box" data-index="{{index}}" data-name="{{item.id}}" bindtap='select'>
   <checkbox class="checkbox" checked="{{item.checked}}"/>
   <image src="../../assets/img/user_img.jpg" mode="widthFix" class="avatar"></image>
   <view>
    <view class="applicant_name">汪小涵 <text>管理员</text> </view>
    <view class="approval_state">总监</view>
   </view>
  </view>
 </view>
</view>

wxss代码:

.memberList{
 background:#fff;
 padding:0 35rpx 0 28rpx;
}
.allSelect_box{
 line-height:90rpx;
 border-bottom:1rpx solid #F5F5F5;
}
.checkbox{
 transform: scale(0.7,0.7);
}
.member_box .checkbox{
 margin-top: 15rpx;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
 color:#fff;
 background: #6669e3;
 border-color:#6669e3;
}
.allSelect{
 margin-left:15rpx;
 vertical-align:middle;
}
.member_box{
 padding-bottom:30rpx;
 display: flex;
 border-bottom:2rpx solid #EBEBEB;
 padding:20rpx 0 20rpx 0;
}
.avatar{
 width:100rpx;
 border-radius:50%;
 margin-left:15rpx;
}
.applicant_name{
 font-size:34rpx;
 padding:0 0 15rpx 30rpx;
}
.applicant_name text{
 color:#fff;
 background:#6669e3;
 font-size:28rpx;
 padding:5rpx 10rpx;
 border-radius:10rpx;
 margin-left:15rpx;
}
.approval_state{
 color:#8D8D8D;
 font-size:28rpx;
 padding-left: 30rpx;
}

js代码:

data: {
  list: [
   { id: 1, name: 1, checked: false },
   { id: 2, name: 2, checked: false },
   { id: 3, name: 3, checked: false },
   { id: 4, name: 4, checked: false },
  ],
  selectilall: false
 },
//单选
 select: function (e) {
  let selectValue = e.currentTarget.dataset.name
  let index = e.currentTarget.dataset.index;
  let list = this.data.list
  let newli = 'list[' + index + '].checked';
  this.setData({
   [newli]: !this.data.list[index].checked
  })
  let num = 0;
  for(var i=0;i<this.data.list.length;i++){
   if(this.data.list[i].checked){
    num++;
   }
  }
  if(num == this.data.list.length){
   this.setData({
    selectilall: true
   })
  }else{
   this.setData({
    selectilall: false
   })
  }
 },
 //全选,取消全选
 selectAll: function (e) {
  let list = this.data.list;
  let selectilall = this.data.selectilall;
  if (selectilall == false) {
   for (let i = 0; i < list.length; i++) {
    let newli = 'list[' + i + '].checked';
    this.setData({
     [newli]: true,
     selectilall: true
    })
   }
  } else {
   for (let i = 0; i < list.length; i++) {
    let newli = 'list[' + i + '].checked';
    this.setData({
     [newli]: false,
     selectilall: false
    })
   }
  }
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
告诉大家什么是JSON
Jun 10 Javascript
JavaScript 面向对象编程(1) 基础
May 18 Javascript
JS 树形递归实例代码
May 18 Javascript
基于jquery的拖动布局插件
Nov 25 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
AngularJS封装指令方法详解
Dec 12 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 #Javascript
浅谈Vue.use到底是什么鬼
Jan 21 #Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 #Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 #Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 #Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 #Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 #Javascript
You might like
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
用PHP实现维护文件代码
2007/06/14 PHP
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
Laravel日志用法详解
2016/10/09 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
javascript 多级checkbox选择效果
2009/08/20 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
用js实现放大镜效果
2020/10/28 Javascript
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
简单说明Python中的装饰器的用法
2015/04/24 Python
python基础教程之Filter使用方法
2017/01/17 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
高中体育教学反思
2014/01/29 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
丧事主持词大全
2014/04/02 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS