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 相关文章推荐
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
js null undefined 空区别说明
Jun 13 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
select下拉框插件jquery.editable-select详解
Jan 22 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
JavaScript作用域链实例详解
Jan 21 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
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
PHP反射API示例分享
2016/10/08 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
JS实现随机抽取三人
2019/11/06 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
python的文件操作方法汇总
2017/11/10 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
python解释器spython使用及原理解析
2019/08/24 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
机电专业毕业生推荐信
2013/11/10 职场文书
农村党支部先进事迹
2014/01/14 职场文书
留学自荐信写作方法
2014/01/27 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android