小程序实现多列选择器


Posted in Javascript onFebruary 15, 2019

本文实例为大家分享了小程序实现多列选择器的具体代码,供大家参考,具体内容如下

代码分两部分,先上wxml

<view class="container">
 <form catchsubmit="formSubmit">
  <view class="form-card">
   <view class="weui-cell weui-cell_input">
    <view class="weui-cell__hd">
     <view class="weui-label">物种<span>*</span></view>
    </view>
    <view class="weui-cell__bd">
     <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
      <view class="weui-input">{{multiArray[0][multiIndex[0]]}}{{multiArray[1][multiIndex[1]]}}{{multiArray[2][multiIndex[2]]}}</view>
     </picker>
    </view>
   </view>
  </view>
 </form>  
</view>

其次是js

Page({
 
 /**
  * 页面的初始数据
  */
 data: {
  objectMultiShow: [],
  objectMultiArray: [],
  multiArray: [],
  multiIndex: [],
  checkeIndex: []
 },
 
 /**
  * 生命周期函数--监听页面加载
  * objectMultiShow--匹配多列选择器渲染数据所对应的json数据(包含id,parentId,name)
  * multiArray--多列选择器渲染数据
  */
 onLoad: function (options) {
  // 初始化
  let data = {
   objectMultiShow: this.data.objectMultiShow,
   objectMultiArray: this.data.objectMultiArray,
   multiArray: this.data.multiArray,
   multiIndex: this.data.multiIndex,
   checkeIndex: this.data.checkeIndex
  }
  data.objectMultiArray = [
   [{ id: 0, name: '无脊柱动物' }, { id: 1, name: '脊柱动物' }],
   [
    { id: 0, name: '扁性动物', parentId: 0 }, { id: 1, name: '线形动物', parentId: 0 }, { id: 2, name: '环节动物', parentId: 0 }, { id: 3, name: '软体动物', parentId: 0 }, { id: 4, name: '节肢动物', parentId: 0 },
    { id: 5, name: '鱼', parentId: 1 }, { id: 6, name: '两栖动物', parentId: 1 }, { id: 7, name: '爬行动物', parentId: 1 }
   ],
   [
    { id: 0, name: '猪肉绦虫', parentId: 0 }, { id: 1, name: '吸血虫', parentId: 0 },
    { id: 2, name: '蛔虫', parentId: 1 },
    { id: 3, name: '蚂蚁', parentId: 2 }, { id: 4, name: '蚂蟥', parentId: 2 },
    { id: 5, name: '河蚌', parentId: 3 }, { id: 6, name: '蜗牛', parentId: 3 }, { id: 7, name: '蛞蝓', parentId: 3 },
    { id: 8, name: '昆虫', parentId: 4 }, { id: 9, name: '甲壳动物', parentId: 4 }, { id: 10, name: '蛛形动物', parentId: 4 }, { id: 11, name: '多足动物', parentId: 4 },
    { id: 3, name: '鲫鱼', parentId: 5 }, { id: 4, name: '带鱼', parentId: 5 },
    { id: 3, name: '青蛙', parentId: 6 }, { id: 4, name: '娃娃鱼', parentId: 6 },
    { id: 3, name: '蜥蜴', parentId: 7 }, { id: 4, name: '龟', parentId: 7 }, { id: 4, name: '壁虎', parentId: 7 },
   ]
  ]
  data.objectMultiShow = data.objectMultiArray.map((item, index) => {
   if (index > 0) {
    item = item.filter(i => i.parentId === data.objectMultiArray[index - 1][0].id)
   }
   return item
  })
  data.multiArray = data.objectMultiShow.map(item => {
   item = item.map(i => i.name)
   return item
  })
  console.log(data.multiIndex)
  // 数据更新
  this.setData(data)
 },
 
 bindMultiPickerChange: function (e) {
  console.log('picker发送选择改变,携带值为', e.detail.value)
  this.setData({
   multiIndex: e.detail.value
  })
 },
 bindMultiPickerColumnChange: function (e) {
  console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
  // 初始化数据
  var data = {
   objectMultiShow: this.data.objectMultiShow,
   multiArray: this.data.multiArray,
   multiIndex: this.data.multiIndex
  };
 
  // 改变第i列数据之后,后几列选择第0个选项(重置)
  data.multiIndex[e.detail.column] = e.detail.value;
  for (let i = e.detail.column; i < data.multiIndex.length - 1; i++) {
   data.multiIndex[i + 1] = 0
  }
 
  /**
   * 改变第i列数据之后,后几列数据更新
   * 两种写法:for 和 switch,switch为三列选择器写法,for由switch精简拓展过来,可用于多列选择器
   * swich写法:如果更改的是第一列数据,第二列数据通过filter筛选(parentId = 第一列选中项id),同时更新第三列数据
   *      如果更改的是第二列数据,更新第三列数据 通过filter筛选(parentId = 第二列选中项id)
   */
  let arry = this.data.objectMultiArray
  for (let i = e.detail.column; i < data.multiIndex.length - 1; i++) {
   data.objectMultiShow[i + 1] = arry[i + 1].filter(item => item.parentId === data.objectMultiShow[i][data.multiIndex[i]].id)
   data.multiArray[i + 1] = data.objectMultiShow[i + 1].map(item => item.name)
  }
  /*switch (e.detail.column) {
   case 0:
    data.objectMultiShow[1] = arry[1].filter(item => item.parentId === data.objectMultiShow[0][data.multiIndex[0]].id)
    data.multiArray[1] = data.objectMultiShow[1].map(item => item.name)
    data.objectMultiShow[2] = arry[2].filter(item => item.parentId === data.objectMultiShow[1][data.multiIndex[1]].id)
    data.multiArray[2] = data.objectMultiShow[2].map(item => item.name)
    break;
   case 1:
    data.objectMultiShow[2] = arry[2].filter(item => item.parentId === data.objectMultiShow[1][data.multiIndex[1]].id)
    data.multiArray[2] = data.objectMultiShow[2].map(item => item.name)
  }*/
  // 数据更新
  this.setData(data);
 }
})

wxml部分选用的官方组件--picker,根据官方文档mode=multiSelector,表示使用多列选择器。

其他参数容我吐槽下:首先是range--绑定的二维数据,只能是字符串组成的二维数组,比如[["a","b"], ["c","d"]],这样的话多列选择器就是第一列a,b选项,第二列c,d选项。感觉很美。然而事实上这能干啥捏?我们做的多列选择器并不是只是页面展示,要跟后台对接数据的,就这样传字符串合适否?我需要的是带id之类的对象,而wxml页面又不支持双括号绑定数据里写map之类的函数方法。所以,我们后台传过来的数据要改造一下,提取其中的name为绑定数据。

第二个就是value,本来以为这个是对应项中的第几个是这样的:a如果对应c,b如果对应d。选择bd应该就是[1, 1],而事实上是[1, 0]。也就是对应页面上展示的第几个对应(bd,页面上第一列有ab两个选项,第二列有且只有一个d)

其他关于bindchange绑定的方法是点击确认按钮触发,bindcolumnchange绑定的方法是滑动多列选择器时候触发,至于bindcancel绑定感觉就是笑话,数据实时改变,取消需要再绑定一个中间值才能达到该有的效果,这里暂时没有做。

js部分我使用了五个数据

  • objectMultiShow: []   选中带id的Object对象数组
  • objectMultiArray: []    后台带id,parentId对象数组
  • multiArray: []    微信小程序组件需求的字符串二维数组
  • multiIndex: []    微信小程序组件需求的选中对象数组
  • checkeIndex: []    基于bindcancel的中间值(暂时未做)

为了达到我想到的真正的多列效果,我不惜出卖肉体,跟后台大哥达成的各种屈辱协议,获得了想要的数据格式第一列数组不带parentId,因为没有parent。第二列parentId对应第一列id,第三列parentId对应第二列id,如果还有多,可以依次类推。然后根据需求,依次从中获取所需的其他数据,完成数据初始化。

然后在滑动多列选择器的时候,动态更新后一列的数据,我这里做的处理是更新后一列数据,并默认选择第一个选项。

详细注释写完,发现更多的是配置代码,具体的功能代码反而很少。

个人感觉,小程序不是写代码,而是在配置选项搭建出来的。

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

Javascript 相关文章推荐
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
js简易版购物车功能
Jun 17 Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
React BootStrap用户体验框架快速上手
Mar 06 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
移动端手指操控左右滑动的菜单
Sep 08 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 #jQuery
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 #Javascript
微信小程序实现联动选择器
Feb 15 #Javascript
推荐一个基于Node.js的表单验证库
Feb 15 #Javascript
微信小程序实现左右列表联动
May 19 #Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 #Javascript
微信小程序实现单选选项卡切换效果
Jun 19 #Javascript
You might like
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
javascript 学习之旅 (1)
2009/02/05 Javascript
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
Python只用40行代码编写的计算器实例
2017/05/10 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
Python中最好用的命令行参数解析工具(argparse)
2019/08/23 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
python xlsxwriter模块的使用
2020/12/24 Python
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
简历的个人自我评价范文
2014/01/03 职场文书
出国留学介绍信
2014/01/13 职场文书
承认错误的检讨书
2014/01/30 职场文书
领班岗位职责范文
2014/02/06 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
安全保证书怎么写
2015/02/28 职场文书
高考1977观后感
2015/06/04 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
JS setTimeout与setInterval的区别
2022/04/20 Javascript