小程序实现单选多选功能


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 相关文章推荐
javascript 时间比较实现代码
Oct 28 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
Feb 20 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
详解JavaScript中常用的函数类型
Nov 18 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
vue中watch和computed的区别与使用方法
Aug 23 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
jquery插件实现搜索历史
Apr 24 jQuery
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 xml 入门学习资料
2011/01/01 PHP
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
python进程与线程小结实例分析
2018/11/11 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
js中indexof的用法详细解析
2013/12/24 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
python docx 中文字体设置的操作方法
2018/05/08 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
HTML中meta标签及Keywords
2020/04/15 HTML / CSS
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
新闻专业个人求职信
2013/12/19 职场文书
四年级数学教学反思
2014/02/02 职场文书
教师试用期自我鉴定
2014/02/12 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
工作简历的自我评价
2019/05/16 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫