小程序模板网

微信小程序省市三级联动

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

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

做这个我用的是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": "朝阳区"


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23515.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询