小程序实现多选框功能


Posted in Javascript onOctober 30, 2018

最近写小程序的时候,遇到多选框的问题!并不是多选框不好操作,而是小程序的多选框实在太丑了好吗!本来的初衷是想修改一下默认样式就OK了,从边框 宽度 到背景 却在最后选择出来的额icon上无从下手!没办法自己手写checked的效果采用的是icon图标。感兴趣的可以往下看看!

先来看看效果图

小程序实现多选框功能

实现的原理也非常的简单,数据渲染到列表,绑定事件修改列表项的checked属性,不建议直接操作data的数据,当要操作的时候可以定义一个局部变量,局部操作完成后,在赋值给data,利用数据双向绑定的特性,就完成所有的操作

wxml

<view class='header1'>
 <view class='header'>
  <view class='header_con flex_between'>
   <view class='left'>
    共计{{items.length}}件商品
   </view>
   <view class='right flex_end'>
    <view wx:if="{{!management_good}}" class='flex_center' bindtap='management'>
     管理
    </view>
    <view wx:if="{{management_good}}" class='flex_center' bindtap='finish_management'>
     完成
    </view>
   </view>
  </view>
 </view>
</view>
<view class='header2'>
 <view class='header'>
  <view class='header_con flex_between'>
   <input value='类目一' disabled='{{title_disabled}}' focus="{{!title_disabled}}">
   </input>
   <view class='right flex_end'>
    <block wx-if="{{title_disabled}}">
     <image src='../../../image/hotel/delete.png' bindtap='change_classname'></image>
    </block>
    <block wx-if="{{!title_disabled}}">
     <view class='flex_center' bindtap='finish_classname'>
      完成
     </view>
    </block>
   </view>
  </view>
 </view>
</view>
<view class='onlinechoose'>
 <view class='hotel_list flex_center' wx:for="{{items}}" wx:key="items" wx:for-item="i" data-id="{{index}}" bindtap='select'>
  <view class='list_cons flex_start'>
   <view wx:if="{{management_good}}" class='lefts'>
    <block wx-if="{{!i.checked}}">
     <view class='icon_none'></view>
    </block>
    <block wx-if="{{i.checked}}">
     <icon type="success" size="30" color="red" />
    </block>
   </view>
   <image src='../../../image/hotel/demoimg.jpg'></image>
   <view class='right'>
    <view class='name'>
     {{i.name}}
    </view>
    <view class='list1 flex_between'>
     <view class='left'>
      <view class='condition1'>
       16?|双人床|含早
      </view>
      <view class='condition2'>
       <block>
        间数:10
       </block>
       <block>
        间数:2
       </block>
      </view>
     </view>
    </view>
    <view class='list1 flex_between'>
     <view class='left'>
      <view class='condition2'>
       类目一
      </view>
     </view>
    </view>
   </view>
  </view>
 </view>
</view>
<view class='bottom flex_between' wx:if="{{management_good}}">
 <view class='left flex_start'>
  <block wx:if="{{select_all}}">
   <view bindtap='select_none' class='flex_start'>
    <icon type="success" size="30" color="red" />
    <view>
     取消全选
    </view>
   </view>
  </block>
  <block wx:if="{{!select_all}}">
   <view bindtap='select_all' class='flex_start'>
    <view class='select_none'>
    </view>
    <view>
     全选
    </view>
   </view>
  </block>
 </view>
 <view class='right flex_end'>
  <view style='text-align:right'>
   <view class='all'>
    共选中{{middlearr.length}}件商品
   </view>
  </view>
  <view bindtap='deleteitem' class='sure'>
   删除
  </view>
 </view>
</view>

下面是我的代码 由于wxss我是在app.wxss和当前文件都有的没太多的整理全都贴上去了,在这里多说一句小程序是支持弹性布局的,当你命名好几个弹性盒子的类名后,将会发现css将会减少很大的工作量

wxss

.header1{
 background-color: #f5f5f5;
}
.header2{
 background-color: #ffffff;
}
.header {
 width: 100%;
 height: 80rpx;
 border-bottom: 1rpx solid #d6d6d6;
}
.header .header_con {
 width: 700rpx;
 height: 80rpx;
 margin: 0 auto;
 color: #333;
 font-size: 30rpx;
}
.header .header_con image{
 width: 44rpx;
 height: 44rpx;
}
.header .header_con .right{
 color: #ff4965;
}
.bottom{
 width: 100%;
 height: 100rpx;
 border-top: 1rpx solid #d6d6d6;
 background-color: #fff;
 position: fixed;
 left: 0rpx;
 bottom: 0rpx;
}
.bottom .left{
 margin-left: 25rpx;
}
.bottom .left .select_none{
 width: 60rpx;
 height: 60rpx;
 border: 1rpx solid #d6d6d6;
 border-radius: 50%;
}
.bottom .right .all{
 color: #ff830f;
 font-size: 26rpx;
}
.bottom .right .gray{
 color: #666666;
 font-size: 22rpx;
}
.bottom .right .sure{
 margin-left: 22rpx;
 width: 220rpx;
 height: 100rpx;
 line-height: 100rpx;
 text-align: center;
 background-color: #ff4965;
 color: #fff;
}

/*列表*/
.onlinechoose{
 width: 750rpx;
 margin-top: 15rpx;
 background-color: #ffffff;
 font-size: 32rpx;
}
.onlinechoose .hotel_list{
 width: 750rpx;
 height: 260rpx;
 border-bottom: 1rpx solid #d6d6d6;
 background-color: #ffffff;
}
.onlinechoose .hotel_list .icon_none{
 width: 60rpx;
 height: 60rpx;
 border: 1rpx solid #d6d6d6;
 border-radius: 50%;
}
.onlinechoose .hotel_list .list_cons{
 width: 700rpx;
 height: 200rpx;
}
.onlinechoose .list_cons .lefts{
 width: 80rpx;
}
.onlinechoose .list_cons image{
 width: 200rpx;
 height: 200rpx;
 margin-right: 25rpx;
}
.list_cons .right{
 width: 395rpx;
 height: 200rpx;
}
.list_cons .right .name{
 font-size: 32rpx;
 color: #333333;
 font-weight: 700;
 letter-spacing: 3rpx;
 margin-bottom: 20rpx;
}
.list_cons .right .list1{
  margin-bottom: 17rpx;
}
.list_cons .right .list1 .condition1{
 font-size: 28rpx;
 color: #999999;
 margin-bottom: 15rpx;
}
.list_cons .right .list1 .condition2{
 font-size: 24rpx;
 color: #999999;
}
.list_cons .right .list1 .act{
 color: #2d8622;
}
.list_cons .right .list1 .r{
 font-size: 24rpx;
 color: #ff4965;
}
.list_cons .right .list1 .big{
 font-size: 32rpx;
}
.list_cons .right .lists2{
 height: 36rpx;
  line-height: 36rpx;
  font-size: 22rpx;
}
.list_cons .right .lists2 .left{
 width: 162rpx;
 text-align: center; 
 color: #ff4965;
 border: 1rpx solid #ff4965;
 box-sizing: border-box;
 border-radius: 5rpx;
}
.list_cons .right .lists2 .right2{
 color: #999999;
}
.flex_center{
 display: flex;
 display: -webkit-flex;
 justify-content: center;
 align-items: center;
}
.flex_between{
 display: flex;
 display: -webkit-flex;
 justify-content: space-between;
 align-items: center;
}
.flex_start{
 display: flex;
 display: -webkit-flex;
 justify-content: flex-start;
 align-items: center;
}
.flex_end{
 display: flex;
 display: -webkit-flex;
 justify-content: flex-end;
 align-items: center;
}

js

js纯手写虽然不太好吧!但是功能实现了,万恶 的checkbox魔鬼
初始化

data: {
  imgUrl: imgUrl,
  title_disabled:true,//控制修改表头名字
  management_good:false,
  select_all:false,
  middlearr:[],
  items: [
   { name: '1', checked: false},
   { name: '2', checked: false},
   { name: '3', checked: false},
   { name: '4', checked: false},
   { name: '5', checked: false},
   { name: '6', checked: false},
  ],
 },
 // 改变类目的名字
 change_classname:function(){
   let that = this;
   that.setData({
    title_disabled: !that.data.title_disabled,
   });
  // 这里自动获取焦点
 },
 finish_classname: function () {
  let that = this;
  that.setData({
   title_disabled: !that.data.title_disabled,
  })
 },
 // 管理商品
 management:function(){
  let that = this;
  that.setData({
   management_good: true,
  })
 },
 finish_management:function(){
  let that = this;
  that.setData({
   management_good:false,
  })
 },
 // 选择
 select:function(e){
  var that = this;
  let arr2 = [];
  if (that.data.management_good == false){
    return;
  }else{
   var arr = that.data.items;
   var index = e.currentTarget.dataset.id;
   arr[index].checked = !arr[index].checked;
   console.log(arr);

   for(let i=0;i<arr.length;i++){
     if(arr[i].checked){
      arr2.push(arr[i])
     }
   };
   that.setData({
    items: arr,
    middlearr:arr2
   })
  }
 },
 // 删除
 deleteitem:function(){
  var that = this;
  let arr = that.data.items;
  let arr2 = [];
  console.log(arr);
  for(let i=0;i<arr.length;i++){
   if (arr[i].checked == false){
    arr2.push(arr[i]);
   }
  }
  that.setData({
   items:arr2,
   middlearr:[]
  })
 },
 // 全选
 select_all:function(){
  let that = this;
  that.setData({
   select_all: !that.data.select_all
  })
  if (that.data.select_all){
   let arr = that.data.items;
   let arr2 = [];
   for (let i = 0; i < arr.length; i++) {
    if (arr[i].checked == true) {
     arr2.push(arr[i]);
    }else{
     arr[i].checked = true;
     arr2.push(arr[i]);
    }
   }
   that.setData({
    items: arr2,
    middlearr:arr2
   })
  }
 },
 // 取消全选
 select_none:function(){
  let that = this;
  that.setData({
   select_all: !that.data.select_all
  })
  let arr = that.data.items;
  let arr2 = [];
  for (let i = 0; i < arr.length; i++) {
    arr[i].checked = false;
    arr2.push(arr[i]);
  }
  that.setData({
   items: arr2,
   middlearr:[]
  })
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
全面理解闭包机制
Jul 11 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 #Javascript
详解微信小程序中组件通讯
Oct 30 #Javascript
vue移动端项目缓存问题实践记录
Oct 29 #Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 #Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 #Javascript
vue-router权限控制(简单方式)
Oct 29 #Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 #Javascript
You might like
非常好用的Zend Framework分页类
2014/06/25 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
php DES加密算法实例分析
2019/09/18 PHP
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
详解JS函数防抖
2020/06/05 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
Python科学画图代码分享
2017/11/29 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
一个大学生十年的职业规划
2014/01/17 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
小浪底导游词
2015/02/12 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers