小程序实现单选多选功能


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 相关文章推荐
!DOCTYPE声明对JavaScript的影响分析
Apr 12 Javascript
jquery 日期分离成年月日的代码
May 14 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
Oct 11 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
实用的Vue开发技巧
May 30 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
前端如何实现动画过渡效果
Feb 05 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
全文搜索和替换
2006/10/09 PHP
PHP获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
PHP面向对象详解(三)
2015/12/07 PHP
33种Javascript 表格排序控件收集
2009/12/03 Javascript
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
javascript 数据存储的常用函数总结
2017/06/01 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
Django models文件模型变更错误解决
2020/05/11 Python
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
大学生职业生涯规划书模板
2014/01/03 职场文书
小学生防溺水广播稿
2014/01/12 职场文书
医院学雷锋活动策划方案
2014/02/15 职场文书
感恩教育活动总结
2014/05/05 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python