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中的Split使用方法与技巧
Mar 09 Javascript
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
js自制图片放大镜功能
Jan 24 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
Apr 01 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
element多个表单校验的实现
May 27 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 curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
firefox插件Firebug的使用教程
2010/01/02 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
2018/03/01 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
Python采用raw_input读取输入值的方法
2014/08/18 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
python基于phantomjs实现导入图片
2016/05/13 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
一道写SQL的面试题和答案
2013/11/19 面试题
艺术专业大学生自我评价
2013/09/22 职场文书
材料成型专业个人求职信范文
2013/09/25 职场文书
办护照工作证明范本
2014/01/14 职场文书
承办会议欢迎词
2014/01/17 职场文书
就业自我评价
2014/02/04 职场文书
食品安全处置方案
2014/06/14 职场文书
植树造林的宣传标语
2014/06/23 职场文书
英文演讲稿开场白
2014/08/25 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
公务员个人年终总结
2015/02/12 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
python绘制箱型图
2021/04/27 Python
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js