mpvue微信小程序多列选择器用法之省份城市选择的实现


Posted in Javascript onMarch 07, 2019

前言

微信小程序默认给我们提供了一个省市区的picker选择器,只需将mode设置为region即可

<picker
 mode="region"
 bindchange="bindRegionChange"
 value="{{region}}"
 custom-item="{{customItem}}"
 >

因为小程序默认提供的省市区选择器只能保存名称,不能保存id,而且我也不需要选择三级城市,所以这里打算通过mode="multiSelector"来实现省份城市的选择

城市数据json格式

关于省份城市数据的获取,这里我通过接口去获取数据,返回的json格式为

{
 "code": 0,
 "msg": "success",
 "data": [
 {
  "id": 2,
  "name": "北京",
  "children": [
  {
   "id": 36,
   "name": "北京市"
  }
  ]
 }
 ]
}

在我们保存提交的时候只需要保存省份和城市的id即可

picker多列选择器的用法

<picker
  mode="multiSelector"
  @change="bindCityChange"
  @columnchange="bindCityColumnChange"
  :value="multiIndex"
  :range="multiArray"
  range-key="name"
 >
  <view class="picker">选择城市{{userInfo.province.name}},{{userInfo.city.name}}</view>
 </picker>

设置picker mode属性为multiSelector

mode="multiSelector"

1、这里需要注意的是,在mpvue中无法直接使用bindchange和bindcolumnchange,而是使用@change和@columnchange这种方式

2、value是一个数组,例如我们有两列

[["北京", "湖南"], ["长沙", "永州"]]

3、range也是一个数组,指定的是value值的选中索引值,下标从0开始,如[0,0]

4、如果我们的数据是一个二维对象数组,我们可以通过使用range-key来指定Object 中 key 的值作为选择器显示内容

5、当我们确认选中之后会触发@change事件

// 城市选择 获取选中的值 [0,0] 这里需要注意的是获取值的方式在mpvue中通过e.mp.detail.value而不是e.detail.value
 bindCityChange(e) {
 // 选中的值索引
 console.log(e.mp.detail.value[0], e.mp.detail.value[1]);
 // 选中的省份和城市数据
 console.log(
 this.multiArray[0][e.mp.detail.value[0]],
 this.multiArray[1][e.mp.detail.value[1]]
 );
 this.userInfo.province = this.multiArray[0][e.mp.detail.value[0]];
 this.userInfo.city = this.multiArray[1][e.mp.detail.value[1]];
 },

6、在我们滚动每一列的值的时候会触发@columnchange事件

7、通过e.mp.detail.columne.mp.detail.value可以获取到修改列对应的值

console.log(
 "修改的列为",
 e.mp.detail.column,
 ",值为",
 e.mp.detail.value
 );

通过获取到修改的数据更新multiIndex的值

// 监听滚动事件 滚动第一列 修改第二列数据
 bindCityColumnChange(e) {
 // 更新multiIndex的值
 this.multiIndex[e.mp.detail.column] = e.mp.detail.value;
 //加载对应省份下城市数据
 switch (e.mp.detail.column) {
 case 0:
  // this.multiArray[1] = this.cityList[e.mp.detail.value].children;
  this.multiArray = [
  this.cityList,
  this.cityList[e.mp.detail.value].children
  ];
  break;
 }
 },
data() {
 return {
multiIndex: [0, 0],
 multiArray: [],
 }
 }

参考阅读

  • https://3water.com/article/121309.htm
  • https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
js的onload事件及初始化按钮事件示例代码
Sep 25 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
js call方法详细介绍(js 的继承)
Nov 18 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 #Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 #Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 #Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 #Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 #Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 #Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 #Javascript
You might like
php防止sql注入代码实例
2013/12/18 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
Python Tkinter GUI编程入门介绍
2015/03/10 Python
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
Python处理Excel文件实例代码
2017/06/20 Python
python实现决策树分类算法
2017/12/21 Python
Python对List中的元素排序的方法
2018/04/01 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
物业客服专员岗位职责
2013/11/30 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
公司地址变更通知
2015/04/25 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python