用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实用组件/插件 查看内容

微信小程序省市三级联动

天下雪 2017-4-10 00:10

作者:西江无月,来自原文地址最近呢刚好做了一个省市联动的功能,今天看到有人问这个怎么做,我就把我做的放上来共享一下:首先呢,来看看效果,点击文字‘点击’,弹出选择窗口,点击取消或者确定(取消、确定按钮 ...

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

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

做这个我用的是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. .quxiao,.queren{
  24. display: block;
  25. position: absolute;
  26. width: 100rpx;
  27. height: 80rpx;
  28. line-height: 80rpx;
  29. /*background: #00f;*/
  30. text-align: center;
  31. color: #0f0;
  32. }
  33. .queren{
  34. right: 0;
  35. top: 0;
  36. }
  37. .cascade_header{
  38. height: 80rpx;
  39. width: 100%;
  40. margin-bottom: 20rpx;
  41. }

好了这里的模板写好了,接下来是引用,引用就很简单了:

首先是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": "朝阳区"
  23. 邀请
    鲜花
    鲜花 (2)
    鸡蛋
    鸡蛋

    刚表态过的朋友 (2 人)

    分享至 : QQ空间
    收藏
    原作者: 西江无月

    相关阅读