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


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 相关文章推荐
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
May 24 Javascript
jquery ajax提交整个表单元素的快捷办法
Mar 27 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 Javascript
antd组件Upload实现自己上传的实现示例
Dec 18 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
create-react-app开发常用配置教程
Jun 25 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
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
php读取csv实现csv文件下载功能
2013/12/18 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
PHP中list方法用法示例
2016/12/01 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
动态添加js事件实现代码
2009/03/12 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
2016/06/07 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
2020/06/19 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
Python去除列表中重复元素的方法
2015/03/20 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
python+flask实现API的方法
2018/11/21 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
pymysql 开启调试模式的实现
2019/09/24 Python
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
艺术专业大学生自我评价
2013/09/22 职场文书
教师开学感言
2014/02/14 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
公务员年度考核评语
2014/12/31 职场文书
二审答辩状范文
2015/05/22 职场文书
表彰大会新闻稿
2015/07/17 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript