欢迎光临,了解微信小程序开发,就上易用通!

van-picker 在微信小程序中的用法 - 省市区多级联动

发布:2020-05-18 11:02浏览: 来源:网络 作者:huan

成品图

van-picker 在微信小程序中的用法 - 省市区多级联动(图1)

一、数据格式

数据是树形结构的数据

van-picker 在微信小程序中的用法 - 省市区多级联动(图2)

数据结构 
二、在xxx.json文件中引入vant组件

 

  1. {
  2.  
  3. "usingComponents": {
  4.  
  5. "van-picker":"/components/vant-weapp/dist/picker/index",
  6.  
  7. "van-popup":"/components/vant-weapp/dist/popup/index",
  8.  
  9.   },
  10.  
  11. "navigationBarTitleText":"用户注册"
  12.  
  13. }

三、在xxx.wxml使用组件

wxml页面代码

van-picker 在微信小程序中的用法 - 省市区多级联动(图3)

四、xxx.js

js代码

van-picker 在微信小程序中的用法 - 省市区多级联动(图4)

js部分代码主要强调以下几点:

1.多列数据格式:对象数组,其中可在页面的 value-key 来指定文字对应的 key 也就是列上所展示的内容。

2.change方法的参数中 :  value: 代表当前改变之后,各列选中的数据;

index:当前改变的是第几列,0代表第一列,以此类推;

picker:当前多列对象

picker.setColumnValues() 方法:用来设置更新各列数据。参数:columnIndex(更新第几列), values(该列数据).

3.confirm方法:点击弹框的确定按钮,返回当前选中各列数据。

 




免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。