小程序实现单选多选功能


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里的正则表达式说明
Aug 03 Javascript
js简单实现竖向tab选项卡的方法
May 04 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
多种js图片预加载实现方式分享
Feb 19 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
前端MVVM框架解析之双向绑定
Jan 24 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 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
收集的PHP中与数组相关的函数
2007/03/22 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
javascript数组排序汇总
2015/07/07 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
Python实现基于权重的随机数2种方法
2015/04/28 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
python找出因数与质因数的方法
2019/07/25 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
用Python 执行cmd命令
2020/12/18 Python
小学敬老月活动方案
2014/02/11 职场文书
理工学院学生自我鉴定
2014/02/23 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
员工工作能力评语
2014/12/31 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
2015年客房服务员工作总结
2015/05/15 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
《三国志》赏析
2019/08/27 职场文书
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android