小程序实现多选框功能


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 urldecode URL解码的问题
Jan 08 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
jQuery插件datatables使用教程
Apr 21 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
微信小程序设置滚动条过程详解
Jul 25 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 excel类 phpExcel使用方法介绍
2010/08/21 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
javascript闭包的理解和实例
2010/08/12 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
js实现日期级联效果
2014/01/23 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
vue中设置、获取、删除cookie的方法
2018/09/21 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
python学习笔记:字典的使用示例详解
2014/06/13 Python
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
大数据分析用java还是Python
2020/07/06 Python
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
澳大利亚百货公司:David Jones
2018/02/08 全球购物
党课学习思想汇报
2014/01/02 职场文书
给客户的道歉信
2014/01/13 职场文书
支部鉴定材料
2014/06/02 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
会计师事务所实习证明
2014/11/16 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
golang 接口嵌套实现复用的操作
2021/04/29 Golang
nginx实现动静分离的方法示例
2021/11/07 Servers