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

2024-10-21 01:37:35

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

效果图：

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
    })
   }
  }
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序自定义多列选择器使用详解

一.预览微信小程序在自带的表单组件中加入了选择器picker,并给出了常用的时间和省市区三级联动选择器,但日常开发中不可能仅仅使用这些选择器,所以我们在学习时先写一个常见的自定义选择器,用于满足项目中的日常需要. 先给出效果图:(先声明选择器中数据为测试使用,与真实情况无关) 二.picker属性一个简单地多列选择器只要给picker组件加属性mode="multiSelector"即可,绑定数据时使用range来绑定一个数组作为显示内容,下面是官方给出的属性解释. 三.创建组件
微信小程序顶部导航栏可滑动并选中放大

这篇文章主要介绍了微信小程序顶部导航栏可滑动并选中放大,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下老规矩,先看效果图可以看到我们实现了如下功能 1,顶部导航栏 2,可以左右滑动的导航栏 3,选中条目放大原理其实很简单,我这里把我研究后的源码发给大家吧. wxml文件如下  <scroll-view scroll-x class="navbar" scroll-with-animatio
微信小程序实现复选框效果

本文实例为大家分享了微信小程序实现复选框片展示的具体代码,供大家参考,具体内容如下样式部分你们自由发挥,反正这里是什么都没写的,选中和没选中直接用这个this.data.arrStatus[checkIndex]去判断就行了,之后你们都懂的. 效果预览: js部分 // page/index/index.js Page({ /** * 页面的初始数据 */ data: { items: [ { name: 'USA', value: '美国' }, { name: 'CHN', value:
微信小程序实现多选框全选与取消全选功能示例

本文实例讲述了微信小程序实现多选框全选与取消全选功能.分享给大家供大家参考,具体如下: js部分: page({ data: { select_all:false, listData: [{code: "111",text: "text1",typ: "type1",}, {code: "021",text: "text2",typ: "type2",}, {code: "11
微信小程序日历/日期选择插件使用方法详解

微信小程序日历选择器插件点击日历日期可以获取到年月日,具体内容如下 wxml <view class="canlendarBgView"> <view class="canlendarView"> <view class="canlendarTopView"> <view class="leftBgView" bindtap="handleCalendar" dat
微信小程序的tab选项卡的实现效果

效果图,既可以点击切换,又可以滑动切换 .wxml  <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">全部</view> &
微信小程序获取复选框全选反选选中的值(实例代码)

wxml文件 <view class="tr"> <view class="th"> <checkbox bindtap="selectall" />全选 </view> <view class="th">id</view> <view class="th">名称</view> </view> <
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能

实现的效果就是: 1.点击全选选中所有商品,再点击全选,取消勾选 2.在选中的同时获取需要的商品id,获取后是以字符串拼接的形式拼成一个字符串 3.点击删除按钮时删除选中的商品点击全选再次点击全选框 wxml关键代码重要代码 value="{{item.goods_id}}" -->checkbox被选中的值就是这个goods_id checked="{{item.checked}}" -->checked代表选中与否 ,ture选中,false
微信小程序实现滑动翻页效果(完整代码)

微信小程序实现滑动翻页效果,效果图如下所示: 源码: <view class="mainFrame"> <swiper class="container" indicator-dots="{{indicatorDots}}" indicator-dots="{{indicatordots}}" autoplay="{{autoplay}}" interval="{{interva
微信小程序全选多选效果实现代码解析

这篇文章主要介绍了微信小程序全选多选效果实现代码解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下效果图: wxml代码: <view class="memberList"> <view class="allSelect_box" bindtap='selectAll'> <checkbox class="checkbox" checked="{{sel
微信小程序全屏滚动字幕的实现方法详解

目录一.实现背景二.实现代码三.滚动速度四.后续优化实现效果一.实现背景无意中在某音上看到用手机横屏作为广告屏的视频,大部分都是用第三方软件实现的: 以及在汽车后挡风玻璃放置提醒字样的视频,这种基本是要花钱买屏幕,通过手机控制屏幕内容: 遂想实现这种效果二.实现代码 1,滚动字幕 zimu.wxml,界面布局,很简单,没啥特别的,顶部一个返回按钮,为了不影响整体效果,可以把这个按钮做成透明的图片放上去:除了那个按钮剩下的就是滚动的字幕组件了 <!--pages/zimu/zimu
微信小程序利用css实现遮罩效果实例详解

微信小程序利用css实现遮罩效果实例详解实现效果图: 如图所示,使用css实现小程序的遮罩效果,代码如下 js文件代码: //index.js //获取应用实例 var app = getApp() Page({ data: { flag: false }, a: function(){ this.setData({flag: false}) }, b: function(){ this.setData({flag: true}) } }) wxss文件代码: .b1{position:fi
微信小程序实现文字跑马灯效果

本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下效果 wxml <view>1 显示完后再显示</view> <view class="example"> <view class="marquee_box"> <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px
微信小程序实现验证码获取倒计时效果

本文实例为大家分享了微信小程序实现获取验证码倒计时效果的具体代码,供大家参考,具体内容如下 wxml <button disabled='{{disabled}}' data-id="2" bindtap="getVerificationCode"> {{time}} </button> js var interval = null //倒计时函数 Page({ data: { date:'请选择日期', fun_id:2, time: '获
详解微信小程序用定时器实现倒计时效果

平常在微信小程序开发的时候,因项目的需求,倒计时必不可少,下面主要讲解定时器在微信小程序中的使用. 这里要先声明一点的就是,该篇主要实现倒计时功能,而且实现是时长较短的倒计时,其他的优化什么的不作主要考虑. 如果实现简单的60s倒计时效果,我们可直接使用setInterval即可,但是在微信小程序中,我们需要用微信小程序的语法,这时就会遇到一个难题,那就是怎么关闭定时器的问题,下面给出实例. WXML代码 <view class='countDown'>倒计时:<text style='
微信小程序实现单选选项卡切换效果

这里展示一个工作中用到的微信小程序的单选选项卡切换效果的制作方法,供大家参考,具体内容如下效果如图: wxml: <view class="item" wx:for="{{data}}" wx:for-item="item" wx:for-index="idx" data-idx="{{idx}}" bindtap="chooseItem"> <view class=
微信小程序页面缩放式侧滑效果的实现代码

先给大家展示下效果图,大家感觉不错,请参考实现代码: 实现原理:点击按钮,往需要动画的div中添加或移除拥有动画效果的class. 由于微信小程序中不能操作page这个根节点,所以,只有用一个div(view)来模仿page根节点. 1.结构 <view class='page {{isFix?"pageShow":"pageHide"}}' > <view class='header'> <view class='h-toggle i
微信小程序导航栏跟随滑动效果的实现代码

效果图 .wxml <view class='tabBar'> <view class='tabItem wx:if="{{tabClick===0?"click":""}}"' bindtap='clickTab' data-index='0'>tab1</view> <view class='tabItem wx:if="{{tabClick===1?"click":&q

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

相关推荐

随机推荐