微信小程序自定义复选框

微信官方给的复选框太丑，想要样式多样需要我们自己定义

先来张效果图

wxml循环生成选框，从js里取数据，根据checked的值，改变标签的样式类

<view class="two {{showView?'hide':'show'}} the-label"><view class='list'><block wx:for="{{items}}" wx:for-item="v" wx:key="k" wx:for-index="index"><!-- wx:for绑定数组 wx:for-item指定数组当前元素的变量名 index指定下标的变量名 --><view class="li {{v.checked?'cur':''}}" data-index="{{index}}" data-value="{{v.value}}" bindtap="checkLabs"><label class='ti'>{{v.value}}</label><image class="zi {{v.checked?'cur':''}}" data-index="{{index}}" data-value="{{v.value}}" bindtap="switchtap" src="../imge/duihao.png"></image></view></block><!-- <view class="all_btn" bindtap="all">全选</view> --></view>

js选中累加，改变数据数组中的checked的布尔值

Page({data:{arr:[],items: [{ value: '星期一', checked:'' },{ value: '星期二', checked:'' },{ value: '星期三', checked:'' },{ value: '星期四', checked: '' },{ value: '星期五', checked: '' },{ value: '星期六', checked: '' },{ value: '星期日', checked: ''},],},checkLabs(e) {var that = this,index = e.currentTarget.dataset.index,value = e.currentTarget.dataset.value,items = that.data.items,arr = that.data.arr,val = items[index].checked, //点击前的值limitNum = 7-this.data.num,curNum = 0; //已选择数量//选中累加for (var i in items) {if (items[i].checked) {curNum += 1;}that.setData({curr: curNum+1})}if (!val) {if (curNum == limitNum) {wx.showModal({content:'选择数量不能超过'+(limitNum)+'个',showCancel: false})return;}arr.push(value);} else {for (var i in arr) {if (arr[i] == value) {arr.splice(i, 1);}}}items[index].checked = !val;that.setData({items: items,arr: arr})},})

cs根据checked的状态，改变单个框体的样式类`

.the-label{margin-left: 65rpx;width: 95%;height: 120px;margin-top: 50px;
}
.the-label .th{width: 100%; overflow: hidden;
}
.the-label .th .ti{ font-size: 30rpx; color: white
}
.the-label .th .tt{color: white; font-size: 24rpx;}
.the-label .list{width: 100%;overflow:hidden;margin-top:-60rpx;
}
.the-label .list .li{padding: 0 32rpx;height: 70rpx; line-height: 60rpx; border: 1px solid #3f3f3f;  border-radius: 10rpx; overflow: hidden; font-size: 26rpx; color: black; float: left; margin: 0 17rpx 17rpx 0; position: relative;
}
.the-label .list .li .zi{display: none;width: 27px;height: 24px;position: absolute;top: 45px;left: 116px;
}
.the-label .list .cur .zi.cur{display: block;width: 27rpx;height: 24rpx;position: absolute;top: 48rpx;left: 116rpx;
}
.the-label .list .li.cur{ color: #3f3f3f; border-color: #df7e05;font-weight: bold
}

微信小程序自定义复选框相关推荐

微信小程序之复选框打对号
微信小程序之复选框checkbox打对号一.实现效果二.实现原理: 在父view中嵌套另一个子view. 父view显示所有边框. 子view显示右边框和下边框并顺时针旋转45度.运用margin ...
【微信小程序---checkbox复选框讲解】
效果: checkbox注意点外围要包裹checkbox-group使用 bindchange事件也是在这个标签内 wx:for 循环遍历list中的每一个item wx:key="id ...
微信小程序自定义授权弹框
微信小程序自定义授权弹框最近微信获取用户信息的接口有调整,就是这货:wx.getUserInfo(OBJECT),文档描述如下: 此接口有调整,使用该接口将不再出现授权弹窗,请使用 <butt ...
微信小程序实现多选框+自定义样式（checkbox）
1.实现效果 2.实现原理小程序多选框微信小程序为我们提供了checkbox-group,多项选择器,内部由多个checkbox组成. checkbox: 3.实现代码 <!--pages/ ...
微信小程序——自定义下拉框
微信小程序本身并没有自带的下拉框组件,我们可以通过view标签自定义一个下拉框.(仅供参考) 目录文件目录实现效果实现逻辑设置数据设置默认选项实现弹出下拉框提供选项值设置所选值源码 ...
微信小程序获取多选框选中值和选中值对应的id
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 官方文档中只有获取多选框的值的方法,但是我需要获取选中的值同时还要获取选中值对应的id,但是又不能操作DOM获 ...
支付宝小程序获取复选框选中值id，使其显示且可编辑
问题概述在做支付宝小程序编辑表单时,需要将用户之前填.选的信息显示出来后再编辑.这里针对复选框选中值的获取显示,通过服务端发送请求后拿到的选中id,显示选中值并且可编辑. axml代码片段 < ...
小程序实现复选框全选和取消全选
页面逻辑是,在小程序复选框列表页面上单独放一个复选框用于全选(设置class为position: fixed;即可固定在页面上),当点击全选时,页面所有复选框都会勾上,再次点击后页面所有复选框的打√都 ...
微信小程序自定义picker弹框组件
要有遥不可及的梦想,也要有脚踏实地的本事.----------- Grapefruit.Banuit Gang(香柚帮) 柚子写项目遇到了一个问题,就是微信小程序官方文档上面的弹框组件picker,它 ...

微信小程序自定义复选框

微信官方给的复选框太丑，想要样式多样需要我们自己定义

微信小程序自定义复选框相关推荐

最新文章

热门文章