van-picker 在微信小程序中的用法 - 省市區多級聯動

轉自  http://www.yiyongtong.com/archives/view-7567-1.html

成品圖

 

 

一、數據格式

數據是樹形結構的數據

 

 

數據結構 
二、在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頁面代碼

 

 

四、xxx.js

js代碼

 

 

js部分代碼主要強調以下幾點：

1.多列數據格式：對象數組，其中可在頁面的 value-key 來指定文字對應的 key 也就是列上所展示的內容。

2.change方法的參數中 ：  value： 代表當前改變之后，各列選中的數據；

index：當前改變的是第幾列，0代表第一列，以此類推；

picker：當前多列對象

picker.setColumnValues() 方法:用來設置更新各列數據。參數：columnIndex(更新第幾列), values(該列數據).

3.confirm方法：點擊彈框的確定按鈕，返回當前選中各列數據。