小程序实现多选框功能


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 相关文章推荐
jQuery中绑定事件的命名空间详解
Apr 05 Javascript
html中table数据排序的js代码
Aug 09 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
告诉你什么是javascript的回调函数
Sep 04 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
JavaScript实现实时更新系统时间的实例代码
Apr 04 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
js实现验证码功能
Jul 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
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
PHP加密解密类实例分析
2015/04/20 PHP
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
vue中轮训器的使用
2019/01/27 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
Python实现周期性抓取网页内容的方法
2015/11/04 Python
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
深入浅析python定时杀进程
2016/06/06 Python
Python从零开始创建区块链
2018/03/06 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
幼儿园教育教学反思
2014/01/31 职场文书
环保倡议书100字
2014/05/15 职场文书
经典演讲稿开场白
2014/08/25 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
单位未婚证明范本
2014/11/25 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
离婚案件原告代理词
2015/05/23 职场文书
远程教育培训心得体会
2016/01/09 职场文书
合作合同协议书
2016/03/21 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js
sql字段解析器的实现示例
2021/06/23 SQL Server
Java基础-封装和继承
2021/07/02 Java/Android