小程序实现单选多选功能


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 相关文章推荐
用正则xmlHttp实现的偷(转)
Jan 22 Javascript
javascript天然的迭代器
Oct 29 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
JavaScript中数组成员的添加、删除介绍
Dec 30 Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 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 网上商城促销设计实例代码
2012/02/17 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
Python中apply函数的用法实例教程
2014/07/31 Python
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
python os.fork() 循环输出方法
2019/08/08 Python
使用python计算三角形的斜边例子
2020/04/15 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
Python截图并保存的具体实例
2021/01/14 Python
行政人员岗位职责
2013/12/08 职场文书
政府采购方案
2014/06/12 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
昆虫记读书笔记
2015/06/26 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python
python绘图subplots函数使用模板的示例代码
2021/04/30 Python
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
分享7个 Python 实战项目练习
2022/03/03 Python