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 相关文章推荐
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
JavaScript 创建对象和构造类实现代码
Jul 30 Javascript
为javascript添加String.Format方法
Aug 11 Javascript
jQuery参数列表集合
Apr 06 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
使用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下连接mssql2005的代码
2011/01/17 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
Javascript 二维数组
2009/11/26 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
JS使用数组实现的队列功能示例
2019/03/04 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
用Eclipse写python程序
2018/02/10 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
渡河少年教学反思
2014/02/12 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
工作经历证明书范文
2014/11/02 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
《植树问题》教学反思
2016/03/03 职场文书
Python编解码问题及文本文件处理方法详解
2021/06/20 Python
centos7安装mysql5.7经验记录
2022/05/02 Servers