作者：西江無月，來自原文地址 
最近呢剛好做了一個省市聯(lián)動的功能，今天看到有人問這個怎么做，我就把我做的放上來共享一下：

首先呢，來看看效果，點(diǎn)擊文字‘點(diǎn)擊’，彈出選擇窗口，點(diǎn)擊取消或者確定（取消、確定按鈕在選擇框上邊，截圖有些不清楚），窗口下滑，

做這個我用的是picker-view這個組件，現(xiàn)在來看一看picker-view的屬性：

現(xiàn)在開始寫wxml的代碼，對了，插一句，我這里是把它寫成一個模板的，先看看目錄結(jié)構(gòu)

我們先來看看cascade.wxml里的代碼：

1. <template name="cascade">
2. <view class="cascade_box" animation="{{animationData}}">
3. <view class="cascade_hei"></view>
4. <view class="cascade_find">
5. <view class="cascade_header">
6. <text class='quxiao' catchtap="quxiao">取消</text>
7. <text class="queren" catchtap="queren">確認(rèn)</text>
8. </view>
9. <picker-view indicator-style="height: 80rpx;" style="width: 100%; height: 400rpx;" bindchange="bindChange">
10. <picker-view-column>
11. <view wx:for="{{sheng}}" wx:key='this' style="line-height: 80rpx;text-align:center;">{{item}}</view>
12. </picker-view-column>
13. <picker-view-column>
14. <view wx:for="{{shi}}" wx:key='this' style="line-height: 80rpx;text-align:center;">{{item}}</view>
15. </picker-view-column>
16. <picker-view-column>
17. <view wx:for="{{qu}}" wx:key='this' style="line-height: 80rpx;text-align:center;">{{item}}</view>
18. </picker-view-column>
19. </picker-view>
20. </view>
21. </view>
22. </template>

接下來是cascade.wxss的代碼：

1. .cascade_box{
2. font-size:28rpx;
3. width: 100%;
4. height: 0;
5. position: fixed;
6. bottom: 0;
7. left: 0;
8. }
9. .cascade_hei{
10. width: 100%;
11. height:732rpx;
12. background: #000;
13. opacity: 0.5;
14. }
15. .cascade_find{
16. width: 100%;
17. height: 500rpx;
18. position: relative;
19. /*bottom: 0;
20. left: 0;*/
21. background: #fff;
22. }
23.  
24. .quxiao,.queren{
25. display: block;
26. position: absolute;
27. width: 100rpx;
28. height: 80rpx;
29. line-height: 80rpx;
30. /*background: #00f;*/
31. text-align: center;
32. color: #0f0;
33. }
34. .queren{
35. right: 0;
36. top: 0;
37. }
38. .cascade_header{
39. height: 80rpx;
40. width: 100%;
41. margin-bottom: 20rpx;
42. }

好了這里的模板寫好了，接下來是引用，引用就很簡單了：

首先是las.wxml的引用：

1. <import src="../../teml/cascade.wxml"/>
2. <view bindtap="dianji">點(diǎn)擊</view>
3. <template is="cascade" data="{{animationData:animationData,sheng:sheng,shi:shi,qu:qu}}"/>

然后是las.wxss的引用（你沒看錯就是一句）：

1. @import '../../teml/cascade.wxss';

接下來就是JS了：

在這里要先說一下保存省市的名稱的json文件格式，這個json文件里又全國的省市名稱(這里只寫了北京市為例子，這是我請求的數(shù)據(jù)的例子，你要根據(jù)你自己請求的數(shù)據(jù)來做一些JS的判斷)：

1. {
2. "regions": [{
3. "id": 110000,
4. "name": "北京",
5. "regions": [{
6. "id": 110100,
7. "name": "北京市",
8. "regions": [{
9. "id": 110101,
10. "name": "東城區(qū)"
11. }, {
12. "id": 110102,
13. "name": "西城區(qū)"
14. }, {
15. "id": 110103,
16. "name": "崇文區(qū)"
17. }, {
18. "id": 110104,
19. "name": "宣武區(qū)"
20. }, {
21. "id": 110105,
22. "name": "朝陽區(qū)"