小程序实现单选多选功能


Posted in Javascript onNovember 04, 2018

小程序的单选组件radio和多选组件checkbox的样式只提供更改颜色,这对实际项目中的需求显然是不够的,所以自己模拟实现一个。

踩坑点:小程序不支持操作dom

1、模拟实现多选框:

实现思路:思路非常简单,给每个选项绑定checked属性,类型为布尔值,点击取反即可

<!--wxml-->
<view class='wrap'>
 <view class='checkbox-con'>
 <checkbox-group bindchange="checkboxChange">
  <label class="{{item.checked?'checkbox checked':'checkbox'}}" wx:for="{{checkboxArr}}" bindtap='checkbox' data-index="{{index}}" wx:key="item.name">
  <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.name}}
  </label>
 </checkbox-group>
  <button type='primary' bindtap='confirm'>提交</button>
 </view>
</view>
/* wxss */
.wrap{
 width: 550rpx;
 margin: 50rpx auto
}
 
.checkbox-con{
 margin-top: 40rpx;
 text-align: center
}
.checkbox{
 width: 260rpx;
 height: 72rpx;
 line-height: 72rpx;
 font-size: 28rpx;
 color: #888888;
 border: 1rpx solid #CECECE;
 border-radius: 5rpx;
 display: inline-block;
 margin: 0 10rpx 20rpx 0;
 position: relative
}
.checked{
 color: #1A92EC;
 background: rgba(49,165,253,0.08);
 border: 1rpx solid #31A5FD;
}
.checkbox checkbox{
 display: none
}
.checked-img{
 width: 28rpx;
 height: 28rpx;
 position: absolute;
 top: 0;
 right: 0
}

js: 

Page({
 data: {
 checkboxArr: [{
  name: '选项A',
  checked: false
 }, {
  name: '选项B',
  checked: false
 }, {
  name: '选项C',
  checked: false
 }, {
  name: '选项D',
  checked: false
 }, {
  name: '选项E',
  checked: false
 }, {
  name: '选项F',
  checked: false
 }],
 },
 checkbox: function (e) {
 var index = e.currentTarget.dataset.index;//获取当前点击的下标
 var checkboxArr = this.data.checkboxArr;//选项集合
 checkboxArr[index].checked = !checkboxArr[index].checked;//改变当前选中的checked值
 this.setData({
  checkboxArr: checkboxArr
 });
 },
 checkboxChange: function (e) {
 var checkValue = e.detail.value;
 this.setData({
  checkValue: checkValue
 });
 },
 confirm: function() {// 提交
 console.log(this.data.checkValue)//所有选中的项的value
 },
})

2、模拟实现单选框

思路:这个和多选差不多,区别就是需要在点击时清空其他项的选中状态,然后再把当前项设置为选中状态

代码也差不多

wxml的话就把check-group标签改为radio-group; js那边就在点击时多加个判断

<!--wxml-->
<view class='wrap'>
 <view class='checkbox-con'>
 <radio-group bindchange="radioChange">
  <label class="{{item.checked?'checkbox checked':'checkbox'}}" wx:for="{{checkboxArr}}" bindtap='radio' data-index="{{index}}" wx:key="item.name">
  <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.name}}
  </label>
 </radio-group>
  <button type='primary' bindtap='confirm'>提交</button>
 </view>
</view>
Page({
 data: {
 checkboxArr: [{
  name: '选项A',
  checked: false
 }, {
  name: '选项B',
  checked: false
 }, {
  name: '选项C',
  checked: false
 }, {
  name: '选项D',
  checked: false
 }, {
  name: '选项E',
  checked: false
 }, {
  name: '选项F',
  checked: false
 }],
 },
 radio: function (e) {
 var index = e.currentTarget.dataset.index;//获取当前点击的下标
 var checkboxArr = this.data.checkboxArr;//选项集合
 if (checkboxArr[index].checked) return;//如果点击的当前已选中则返回
 checkboxArr.forEach(item => {
  item.checked = false
 })
 checkboxArr[index].checked = true;//改变当前选中的checked值
 this.setData({
  checkboxArr: checkboxArr
 });
 },
 radioChange: function (e) {
 var checkValue = e.detail.value;
 this.setData({
  checkValue: checkValue
 });
 },
 confirm: function() {// 提交
 console.log(this.data.checkValue)//所有选中的项的value
 },
})

最后上个效果截图

小程序实现单选多选功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery $.each()使用探讨
Sep 23 Javascript
jquery日历控件实现方法分享
Mar 07 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 #Javascript
微信小程序实现登录注册tab切换效果
Dec 29 #Javascript
原生js实现淘宝放大镜效果
Oct 28 #Javascript
微信小程序如何获取手机验证码
Nov 04 #Javascript
微信小程序实现弹出层效果
May 26 #Javascript
微信小程序实现预览图片功能
Oct 22 #Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 #Javascript
You might like
PHP系统流量分析的程序
2006/10/09 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
Python基于有道实现英汉字典功能
2015/07/25 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
Python制作简易注册登录系统
2016/12/15 Python
python实现12306火车票查询器
2017/04/20 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
Python sublime安装及配置过程详解
2020/06/29 Python
python反扒机制的5种解决方法
2021/02/06 Python
文员个人求职自荐信
2013/09/21 职场文书
大学生怎样进行自我评价
2013/12/07 职场文书
英文自我鉴定
2013/12/10 职场文书
三年大学生活自我鉴定
2014/01/21 职场文书
大学生自我鉴定评语
2014/01/27 职场文书
医药个人求职信范文
2014/01/29 职场文书
感恩教育活动总结
2014/05/05 职场文书
汽车转让协议书范本
2014/12/07 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
优秀创业计划书分享
2019/07/19 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript