小程序实现多列选择器


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 相关文章推荐
js对象的复制继承实例
Jan 10 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 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
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
ext 代码生成器
2009/08/07 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
python创建和使用字典实例详解
2013/11/01 Python
python实现的简单RPG游戏流程实例
2015/06/28 Python
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
Puppeteer使用示例详解
2019/06/20 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
HTML5标签大全
2016/11/23 HTML / CSS
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
酒店员工辞职信范文
2015/02/28 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
Python实现照片卡通化
2021/12/06 Python