小程序实现单选多选功能


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选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
JS运动特效之链式运动分析
Jan 24 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 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
session 的生命周期是多长
2006/10/09 PHP
用PHP将数据导入到Foxmail
2006/10/09 PHP
PHP分页显示制作详细讲解
2008/11/19 PHP
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
python从sqlite读取并显示数据的方法
2015/05/08 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
搞笑创意广告语
2014/03/17 职场文书
2015国庆节宣传语
2015/07/14 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL