小程序实现单选多选功能


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 相关文章推荐
Array.slice()与Array.splice()的返回值类型
Oct 09 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 Javascript
详解原生JS回到顶部
Mar 25 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 Javascript
JS实现网页端猜数字小游戏
Mar 06 Javascript
javascript的hashCode函数实现代码小结
Aug 11 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生成HTML静态页面实例代码
2008/08/31 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
javascript demo 基本技巧
2009/12/18 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda
2014/05/21 DOTA
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
python中如何使用朴素贝叶斯算法
2017/04/06 Python
Python变量和字符串详解
2017/04/29 Python
使用Python设计一个代码统计工具
2018/04/04 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
python使用turtle库绘制时钟
2020/03/25 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
python调用c++传递数组的实例
2019/02/13 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
Python 如何查找特定类型文件
2020/08/17 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
.NET常见笔试题集
2012/12/01 面试题
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
工厂仓管员岗位职责
2014/01/01 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
《小小的船》教学反思
2016/02/18 职场文书
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫