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


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 判断 object 的特定类转载
Feb 01 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
angular2使用简单介绍
Mar 01 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
vue组件的写法汇总
Apr 12 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
vue路由--网站导航功能详解
Mar 29 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 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不写闭合标签的好处
2014/03/04 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
python3安装speech语音模块的方法
2018/12/24 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
python怎么判断模块安装完成
2020/06/19 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
基于opencv实现简单画板功能
2020/08/02 Python
python 实现表情识别
2020/11/21 Python
python 通过exifread读取照片信息
2020/12/24 Python
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
2014年小班元旦活动方案
2014/02/16 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
实习单位证明范例
2014/11/17 职场文书
公司2014年度工作总结
2014/12/10 职场文书
委托函范文
2015/01/29 职场文书
先进工作者个人总结
2015/02/15 职场文书
2015年工会工作总结
2015/03/30 职场文书
2016年清明节寄语
2015/12/04 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang
详解pytorch创建tensor函数
2022/03/22 Python