小程序实现多选框功能


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 相关文章推荐
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
Apr 15 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
javascript 实现map集合
Apr 03 Javascript
深入理解setTimeout函数和setInterval函数
May 20 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
你准备好迎接vue3.0了吗
Apr 28 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 Javascript
基于Vant UI框架实现时间段选择器
Dec 24 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
PHP 采集程序 常用函数
2008/12/18 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
python抓取京东商城手机列表url实例代码
2013/12/18 Python
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
Python中的测试模块unittest和doctest的使用教程
2015/04/14 Python
Python画图学习入门教程
2016/07/01 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
python之django母板页面的使用
2018/07/03 Python
python实现证件照换底功能
2019/08/20 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
美国知名生活购物网站:Goop
2017/11/03 全球购物
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
广告传媒专业应届生求职信
2014/03/01 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
护士求职自荐信
2015/03/25 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
Python中递归以及递归遍历目录详解
2021/10/24 Python