作者：西江无月，来自原文地址 
最近呢刚好做了一个省市联动的功能，今天看到有人问这个怎么做，我就把我做的放上来共享一下：

首先呢，来看看效果，点击文字‘点击’，弹出选择窗口，点击取消或者确定（取消、确定按钮在选择框上边，截图有些不清楚），窗口下滑，

做这个我用的是picker-view这个组件，现在来看一看picker-view的属性：

现在开始写wxml的代码，对了，插一句，我这里是把它写成一个模板的，先看看目录结构

我们先来看看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">确认</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">点击</view>
3. <template is="cascade" data="{{animationData:animationData,sheng:sheng,shi:shi,qu:qu}}"/>

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

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

接下来就是JS了：

在这里要先说一下保存省市的名称的json文件格式，这个json文件里又全国的省市名称(这里只写了北京市为例子，这是我请求的数据的例子，你要根据你自己请求的数据来做一些JS的判断)：

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