小程序实现单选多选功能


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 相关文章推荐
js写一个字符串转成驼峰的实例
Jun 21 Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
JavaScript体验异步更好的解决办法
Jan 08 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
react中Suspense的使用详解
Sep 01 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
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中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
php发送post请求函数分享
2014/03/06 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
php命令行模式代码实例详解
2021/02/26 PHP
Div Select挡住的解决办法
2008/08/07 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
python调用fortran模块
2016/04/08 Python
Python和Sublime整合过程图示
2019/12/25 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
文明学生事迹材料
2014/01/29 职场文书
高中历史教学反思
2014/02/08 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
超市创业计划书
2014/09/15 职场文书
研究生个人学年总结
2015/02/14 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
幼儿园开学通知
2015/04/24 职场文书
单身证明范本
2015/06/15 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL