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


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 相关文章推荐
在Javascript中定义对象类别
Dec 22 Javascript
Opacity.js
Jan 22 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 Javascript
js 判断图片是否加载完以及实现图片的预下载
Aug 14 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
Vue——前端生成二维码的示例
Dec 19 Vue.js
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 飞信好友免费短信API接口开源版
2010/07/22 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
vue项目环境变量配置的实现方法
2018/10/12 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
python flask中动态URL规则详解
2019/11/22 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
python3中布局背景颜色代码分析
2020/12/01 Python
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
淘宝中秋节活动方案
2014/01/31 职场文书
校园摄影活动策划方案
2014/02/05 职场文书
导师就业推荐信范文
2014/05/22 职场文书
工作求职信
2014/07/04 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
介绍信格式
2015/01/30 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
2019教师的学习计划
2019/06/25 职场文书