小程序实现单选多选功能


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 相关文章推荐
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
让table变成exls的示例代码
Mar 24 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
JS面向对象之多选框实现
Jan 17 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 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 设计模式之 单例模式
2008/12/19 PHP
PHP的一个基础知识 表单提交
2011/07/04 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
2017/01/21 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
Python 随机生成中文验证码的实例代码
2013/03/20 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
python绘制多个曲线的折线图
2020/03/23 Python
Python实现多属性排序的方法
2018/12/05 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
资深地理教师自我评价
2013/09/21 职场文书
司机的工作范围及职责
2013/11/13 职场文书
战友聚会邀请函
2014/01/18 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
工会趣味活动方案
2014/08/18 职场文书
民族精神月活动总结
2014/08/28 职场文书
二婚主持词
2015/06/30 职场文书
2019邀请函格式及范文
2019/05/20 职场文书