微信小程序自定义多列选择器使用详解


Posted in Javascript onJune 21, 2019

一、预览

微信小程序在自带的表单组件中加入了选择器picker,并给出了常用的时间和省市区三级联动选择器,但日常开发中不可能仅仅使用这些选择器,所以我们在学习时先写一个常见的自定义选择器,用于满足项目中的日常需要。
先给出效果图:(先声明选择器中数据为测试使用,与真实情况无关)

微信小程序自定义多列选择器使用详解

二、picker属性

一个简单地多列选择器只要给picker组件加属性mode="multiSelector"即可,绑定数据时使用range来绑定一个数组作为显示内容,下面是官方给出的属性解释。

微信小程序自定义多列选择器使用详解

三、创建组件

我们可以先在.wxml建一个自定义picker组件:

<picker 
 mode="multiSelector" 
 bindchange="bindCustomPickerChange" 
 bindcolumnchange="bindCustomPickerColumnChange" 
 value="{{customIndex}}" 
 range="{{onlyArray}}"
 >
 <view>
  多列自创选择器:{{onlyArray[0][customIndex[0]]}},{{onlyArray[1][customIndex[1]]}},{{onlyArray[2][customIndex[2]]}}
 </view>
</picker>

要注意的是,此处的onlyArray数组只是当前显示内容的数组,并不是我们全部数据的数组。

四、自定义函数

写好组件,我们就来写js文件,思路如下:

1.先创建页面所需数据

Page({

 /**
 * 页面的初始数据
 */
 data: {
 //当前选中数组的下标值
 customIndex: [0, 0, 0],
 //当前选中数组
 onlyArray: [
  [],
  [],
  []
 ],
 //customArray假设为我们从后台获取到的json数据
 customArray: [{
  name: '百度',
  dept: [{
   name: '搜索',
   product: [{
    name: '百度搜索'
    },
    {
    name: '百度一下'
    },
   ]
   },
   {
   name: '团购',
   product: [{
    name: '百度糯米'
   }, {
    name: '饿了么'
   }]
   },
   {
   name: '音乐',
   product: [{
    name: '百度音乐'
   }]
   },
   {
   name: '问答社区',
   product: [{
    name: '百度贴吧'
   }]
   }
  ]
  },

  {
  name: '腾讯',
  dept: [{
   name: '社交',
   product: [{
    name: 'QQ'
    },
    {
    name: '微信'
    },
   ]
   },
   {
   name: '视频',
   product: [{
    name: '腾讯视频'
    },
    {
    name: '搜狐视频'
    },
   ]
   },

   {
   name: '短视频',
   product: [{
    name: '微视'
   }]
   }
  ]
  },
 ],
 },

2.加载页面时给出赋值函数。

可以看到,当前选中数组onlyArray是空的,在小程序显示时会直接显示成空,所以需要在页面创建时给一个初始值,这个初始值使用customIndex数组来给出,也可以用于页面数据回填。代码如下:

/**
 * 生命周期函数--监听页面加载
 */
 onLoad: function(options) {
 var data = {
  customArray: this.data.customArray,
  customIndex: this.data.customIndex,
  onlyArray: this.data.onlyArray,
 };
 for (var i = 0; i < data.customArray.length; i++) {
  data.onlyArray[0].push(data.customArray[i].name);
 }
 for (var j = 0; j < data.customArray[data.customIndex[0]].dept.length; j++) {
  data.onlyArray[1].push(data.customArray[data.customIndex[0]].dept[j].name);
 }
 for (var k = 0; k < data.customArray[data.customIndex[0]].dept[data.customIndex[1]].product.length; k++) {
  data.onlyArray[2].push(data.customArray[data.customIndex[0]].dept[data.customIndex[1]].product[k].name);
 }
 this.setData(data);
 },

3.创建组件监听函数。

这里需要两个函数,分别是bindchange(打开组件后点击确定触发)和bindcolumnchange(打开组件后滑动列触发)。

//多列自定义选择器改变value的方法
 bindCustomPickerChange: function(e) {
 var customArray = this.data.customArray,
  customIndex = this.data.customIndex,
  onlyArray = this.data.onlyArray;

 console.log('picker发送选择改变,携带值为', e.detail.value);
 //此处e.detail.value为当前选择的列的下标值数组,如[0,1,0]
 
 console.log('picker最终选择值为:', onlyArray[0][customIndex[0]], onlyArray[1][customIndex[1]], onlyArray[2][customIndex[2]]);
 this.setData({
  customIndex: e.detail.value
 })
 },

 //多列自创选择器换列方法
 bindCustomPickerColumnChange: function(e) {
 var customArray = this.data.customArray,
  customIndex = this.data.customIndex,
  onlyArray = this.data.onlyArray;

 customIndex[e.detail.column] = e.detail.value;
 // console.log(onlyArray);

 var searchColumn = () => {
  for (var i = 0; i < customArray.length; i++) {
  var arr1 = [];
  var arr2 = [];
  if (i == customIndex[0]) {
   for (var j = 0; j < customArray[i].dept.length; j++) {
   arr1.push(customArray[i].dept[j].name);
   if (j == customIndex[1]) {
    for (var k = 0; k < customArray[i].dept[j].product.length; k++) {
    arr2.push(customArray[i].dept[j].product[k].name);
    }
    onlyArray[2] = arr2;
   }
   }
   onlyArray[1] = arr1;
  }
  };
 }

 switch (e.detail.column) {
  case 0:
  customIndex[1] = 0;
  customIndex[2] = 0;
  searchColumn();
  break;
  case 1:
  customIndex[2] = 0;
  searchColumn();
  break;
 }
 this.setData({
  onlyArray: onlyArray,
  customIndex: customIndex
 });
 },

需要说明的是:

1).bindchange和bindcolumnchange两个函数都是eventhandle类型的,但他们绑定的数据不同。

  • bindchange函数的e.detail.value为当前选择的所有列的下标值数组,如[0,1,0]代表当前选择器的三列数据下标;
  • bindcolumnchange函数的e.detail.column代表当前选择的是第几列,e.detail.value为具体的当前选择的第几列的数据的下标,是一个数字。

2).在bindcolumnchange函数中,进行e.detail.column的判断,

  • 如果e.detail.column == 0,则代表改变的是第一列的数据,此时要将第二列和第三列的数据下标全部置为0,即置为缺省数据,并将onlyArray数组进行联动变化;
  • 如果e.detail.column ==1,则代表改变的是第二列的数据,此时将第三列的数据下标置为0,将onlyArray数组进行联动变化;
  • 如果e.detail.column ==2,则代表改变的是第三列的数据,而前两列不需要进行变化,故不需要判断这种情况的数组变化。

3).点击确定后,调用bindchange方法得到选择结果。我们可以得到的数据包括两部分,

  • 一是当前选择的所有列的下标值数组,即customIndex,数据回填时即使用这部分数据;
  • 二是当前选择的内容,我们用customIndex中的下标查找onlyArray数组中的具体内容得到具体值,例如 " 百度,搜索,百度一下 "。

五、遇到的问题

在这里遇到一个bug,如果在switch语句中将customIndex[0]或customIndex[1]置为0的语句放在searchColumn()后边时,数组显示会混乱,如图所示:

微信小程序自定义多列选择器使用详解

即第一列换列时,如果第二列数据下标非0,则第三列数据无法对应上。

根据上述bug描述,我猜想可能是在switch判断中将后列数据下标置为0的操作晚于数组变化的的方法才会导致此问题。

所以后来将customIndex[0]或customIndex[1]置为0的语句放在searchColumn()前才解决了此问题。

六、总结

此时我们的自定义多列选择器就建好了,使用json数据作为总数据,可以自定义选项,可以得到想要的两部分数据,可以数据回填,基本满足了项目中的实际需要。

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

Javascript 相关文章推荐
javascript getElementsByTagName
Jan 31 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
jQuery中队列queue()函数的实例教程
May 03 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
ant design 日期格式化的实现
Oct 27 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 #Javascript
Vue多环境代理配置方法思路详解
Jun 21 #Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 #Javascript
使用express来代理服务的方法
Jun 21 #Javascript
react+redux仿微信聊天界面
Jun 21 #Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 #jQuery
jQuery事件委托代码实践详解
Jun 21 #jQuery
You might like
php实现的zip文件内容比较类
2014/09/24 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
webpack优化的深入理解
2018/12/10 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
python中xrange和range的区别
2014/05/13 Python
Python 数据结构之堆栈实例代码
2017/01/22 Python
python判断自身是否正在运行的方法
2019/08/08 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
银行门卫岗位职责
2013/12/29 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
移交协议书
2014/08/19 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
环境建议书
2015/02/04 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android