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


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 相关文章推荐
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
jquery 插件学习(六)
Aug 06 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
JS判断字符串包含的方法
May 05 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
微信小程序开发注意指南和优化实践(小结)
Jun 21 Javascript
如何基于js判断浏览器版本
Feb 20 Javascript
jQuery实现日历效果
Sep 11 jQuery
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 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自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
axios基本入门用法教程
2017/03/25 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
原生js实现简单的模态框示例
2017/09/08 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
[01:23]2019完美世界全国高校联赛(春季赛)合肥全国总决赛
2019/06/10 DOTA
Python的函数嵌套的使用方法
2014/01/24 Python
Python使用multiprocessing创建进程的方法
2015/06/04 Python
python psutil库安装教程
2018/03/19 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
老生常谈python中的重载
2018/11/11 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
python能在浏览器能运行吗
2020/06/17 Python
项目资料员岗位职责
2013/12/10 职场文书
实习生自我评价
2014/01/18 职场文书
七年级地理教学反思
2014/01/26 职场文书
财务主管岗位职责
2014/02/28 职场文书
新课培训心得体会
2014/09/03 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python