微信小程序省市联动

最近呢刚好做了一个省市联动的功能,今天看到有人问这个怎么做,我就把我做的放上来共享一下:

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

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

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

我们先来看看cascade.wxml里的代码:

<template name="cascade">
  <view class="cascade_box" animation="{{animationData}}">
  <view class="cascade_hei"></view>
   <view class="cascade_find">
        <view class="cascade_header">
            <text class=‘quxiao‘ catchtap="quxiao">取消</text>
            <text class="queren" catchtap="queren">确认</text>
        </view>
        <picker-view indicator-style="height: 80rpx;" style="width: 100%; height: 400rpx;" bindchange="bindChange">
            <picker-view-column>
            <view wx:for="{{sheng}}" wx:key=‘this‘ style="line-height: 80rpx;text-align:center;">{{item}}</view>
            </picker-view-column>
            <picker-view-column>
            <view wx:for="{{shi}}" wx:key=‘this‘ style="line-height: 80rpx;text-align:center;">{{item}}</view>
            </picker-view-column>
            <picker-view-column>
            <view wx:for="{{qu}}" wx:key=‘this‘ style="line-height: 80rpx;text-align:center;">{{item}}</view>
            </picker-view-column>
        </picker-view>
    </view>
</view>
</template>

接下来是cascade.wxss的代码:

.cascade_box{
    font-size:28rpx;
    width: 100%;
    height: 0;
    position: fixed;
    bottom: 0;
    left: 0;
}
.cascade_hei{
    width: 100%;
    height:732rpx;
    background: #000;
    opacity: 0.5;
}
.cascade_find{
    width: 100%;
    height: 500rpx;
    position: relative;
    /*bottom: 0;
    left: 0;*/
    background: #fff;
}

.quxiao,.queren{
    display: block;
    position: absolute;
    width: 100rpx;
    height: 80rpx;
    line-height: 80rpx;
    /*background: #00f;*/
    text-align: center;
    color: #0f0;
}
.queren{
    right: 0;
    top: 0;
}
.cascade_header{
    height: 80rpx;
    width: 100%;
    margin-bottom: 20rpx;
}

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

首先是las.wxml的引用:

<import src="../../teml/cascade.wxml"/>
<view bindtap="dianji">点击</view>
<template is="cascade" data="{{animationData:animationData,sheng:sheng,shi:shi,qu:qu}}"/>

然后是las.wxss的引用(你没看错就是一句):

@import ‘../../teml/cascade.wxss‘;

接下来就是JS了:

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

{
    "regions": [{
        "id": 110000,
        "name": "北京",
        "regions": [{
            "id": 110100,
            "name": "北京市",
            "regions": [{
                "id": 110101,
                "name": "东城区"
            }, {
                "id": 110102,
                "name": "西城区"
            }, {
                "id": 110103,
                "name": "崇文区"
            }, {
                "id": 110104,
                "name": "宣武区"
            }, {
                "id": 110105,
                "name": "朝阳区"
            }, {
                "id": 110106,
                "name": "丰台区"
            }, {
                "id": 110107,
                "name": "石景山区"
            }, {
                "id": 110108,
                "name": "海淀区"
            }, {
                "id": 110109,
                "name": "门头沟区"
            }, {
                "id": 110111,
                "name": "房山区"
            }, {
                "id": 110112,
                "name": "通州区"
            }, {
                "id": 110113,
                "name": "顺义区"
            }, {
                "id": 110114,
                "name": "昌平区"
            }, {
                "id": 110115,
                "name": "大兴区"
            }, {
                "id": 110116,
                "name": "怀柔区"
            }, {
                "id": 110117,
                "name": "平谷区"
            }, {
                "id": 110228,
                "name": "密云县"
            }, {
                "id": 110229,
                "name": "延庆县"
            }]
        }],
        "pinyin": "BeiJing",
        "hot": true,
        "municipality": true
    }]}

这里就是对数据进行操作的las.js

Page({
  data: {
      sheng: [],//获取到的所有的省
      shi: [],//选择的该省的所有市
      qu: [],//选择的该市的所有区县
      sheng_index:0,//picker-view省项选择的value值
      shi_index:0,//picker-view市项选择的value值
      qu_index:0,//picker-view区县项选择的value值
      shengshi:null,//取到该数据的所有省市区数据
      jieguo:{},//最后取到的省市区名字
      animationData: {}
  },
//点击事件,点击弹出选择页
  dianji:function(){
    //这里写了一个动画,让其高度变为满屏
      var animation = wx.createAnimation({
          duration: 500,
            timingFunction: ‘ease‘,
        })
        this.animation = animation
        animation.height(1332+‘rpx‘).step()
        this.setData({
          animationData:animation.export()
        })

  },
//取消按钮
  quxiao:function(){
    //这里也是动画,然其高度变为0
      var animation = wx.createAnimation({
          duration: 500,
            timingFunction: ‘ease‘,
        })

        this.animation = animation
        animation.height(0+‘rpx‘).step()
        this.setData({
          animationData:animation.export()
        });
    //取消不传值,这里就把jieguo 的值赋值为{}
        this.setData({
            jieguo:{}
        });
        console.log(this.data.jieguo);
  },
//确认按钮
  queren:function(){
   //一样是动画,级联选择页消失,效果和取消一样
    var animation = wx.createAnimation({
          duration: 500,
            timingFunction: ‘ease‘,
        })
        this.animation = animation
        animation.height(0+‘rpx‘).step()
        this.setData({
          animationData:animation.export()
        });
      console.log(this.data.jieguo);
  },
//滚动选择的时候触发事件
  bindChange: function(e) {
//这里是获取picker-view内的picker-view-column 当前选择的是第几项

 const val = e.detail.value
this.setData({
      sheng_index: val[0],
      shi_index: val[1],
      qu_index: val[2]
    })
    this.jilian();
    console.log(val);
    console.log(this.data.jieguo);
  },
//这里是判断省市名称的显示
  jilian:function(){
     var  that=this,
          shengshi=that.data.shengshi,
          sheng=[],
          shi=[],
          qu=[],
          qu_index=that.data.qu_index,
          shi_index=that.data.shi_index,
          sheng_index=that.data.sheng_index;
    //遍历所有的省,将省的名字存到sheng这个数组中
      for (let i =0; i < shengshi.length; i++) {
          sheng.push(shengshi[i].name)
        }

        if(shengshi[sheng_index].regions){//这里判断这个省级里面有没有市(如数据中的香港、澳门等就没有写市)
            if(shengshi[sheng_index].regions[shi_index]){//这里是判断这个选择的省里面,有没有相应的下标为shi_index的市,因为这里的下标是前一次选择后的下标,比如之前选择的一个省有10个市,我刚好滑到了第十个市,现在又重新选择了省,但是这个省最多只有5个市,但是这时候的shi_index为9,而这里的市根本没有那么多,所以会报错
          //这里如果有这个市,那么把选中的这个省中的所有的市的名字保存到shi这个数组中
                for(let i=0;i< shengshi[sheng_index].regions.length;i++){
                    shi.push(shengshi[sheng_index].regions[i].name);
                }
                 console.log(‘执行了区级判断‘);

                if(shengshi[sheng_index].regions[shi_index].regions){//这里是判断选择的这个市在数据里面有没有区县
             if(shengshi[sheng_index].regions[shi_index].regions[qu_index]){//这里是判断选择的这个市里有没有下标为qu_index的区县,道理同上面市的选择
               console.log(‘这里判断有没有进区里‘);
            //有的话,把选择的这个市里面的所有的区县名字保存到qu这个数组中
                    for(let i=0;i< shengshi[sheng_index].regions[shi_index].regions.length;i++){
                      console.log(‘这里是写区得‘);
                        qu.push(shengshi[sheng_index].regions[shi_index].regions[i].name);
                     }
                }else{
          //这里和选择市的道理一样
                  that.setData({
                      qu_index:0
                  });
                  for(let i=0;i< shengshi[sheng_index].regions[shi_index].regions.length;i++){
                        qu.push(shengshi[sheng_index].regions[shi_index].regions[i].name);
                     }
                }}else{
            //如果这个市里面没有区县,那么把这个市的名字就赋值给qu这个数组
                  qu.push(shengshi[sheng_index].regions[shi_index].name);
                }
            }else{
      //如果选择的省里面没有下标为shi_index的市,那么把这个下标的值赋值为0;然后再把选中的该省的所有的市的名字放到shi这个数组中
              that.setData({
                  shi_index:0
              });
               for(let i=0;i< shengshi[sheng_index].regions.length;i++){
                    shi.push(shengshi[sheng_index].regions[i].name);
                }

            }
        }else{
      //如果该省级没有市,那么就把省的名字作为市和区的名字
                shi.push(shengshi[sheng_index].name);
                qu.push(shengshi[sheng_index].name);
        }

        console.log(sheng);
        console.log(shi);
        console.log(qu);
        //选择成功后把相应的数组赋值给相应的变量
        that.setData({
              sheng: sheng,
              shi: shi,
              qu: qu
        });
    //有时候网络慢,会出现区县选择出现空白,这里是如果出现空白那么执行一次回调
        if(sheng.length==0||shi.length==0||qu.length==0){
              that.jilian();
              console.log(‘这里执行了回调‘);
              // console.log();
        }
        console.log(sheng[that.data.sheng_index]);
        console.log(shi[that.data.shi_index]);
        console.log(qu[that.data.qu_index]);
    //把选择的省市区都放到jieguo中
        let jieguo={
            sheng:sheng[that.data.sheng_index],
            shi:shi[that.data.shi_index],
            qu:qu[that.data.qu_index]
        };
  
        that.setData({
            jieguo:jieguo
        });

  },
  onLoad:function(){
    var that=this;
//请求省市区的数据
      wx.request({
        url: ‘https://wxxapp.duapp.com/quanguo.json‘,
        data: {},
        method: ‘GET‘,
        success: function(res){
          // success

          console.log(res.data.regions);
          // shengshi=res.data.regions
          that.setData({
            shengshi:res.data.regions
          });
      
          that.jilian();   

        },
        fail: function() {
          // fail
        },
        complete: function() {
          // complete
        }
      })
  }
})

这里要注意你请求的省市区的数据格式,一定要细心,我这里经常就是不细心导致一些错误,想了解更多的小程序的知识请添加微信小程序开发交流群:368506119

时间: 2024-11-04 13:10:16

微信小程序省市联动的相关文章

微信小程序picker组件 - 省市二级联动

微信小程序picker组件自带省市区选择器,但是业务需求需要省市选择器,参考官方demo自己写了一个省市选择器 wxml文件 <view class="section"> <view class="section__title">省市二级联动demo</view> <picker mode="multiSelector" bindchange="bindMultiPickerChange&quo

自定义省市选择器 微信小程序多列选择器

由于微信小程序的选择器为省市区选择器共3列 如我仅需要省市2列的选择器 就需要我们另寻他法找来找去没有合适的 只能自己写了 1. 首先我们把所需要的省数据 市县数据放在一个 p_c.js 文件里面,使用的时候可以通过util 来引用 //p_c.js module.exports = { "province": [ { "title": "上海市", "weight": 1, "evaluation_value&qu

微信小程序右到左联动

上一篇说了小程序的左到右的联动效果的实现,这个还不算太难,真正为难人的是右边滑动左边的选项对应切换的效果,咱今天就讲一下.话不多说先看效果. 右左联动.gif 一.关键技术: (1) 小程序 wxss 中使用 rpx,而 js 中 scrollTop 获取到的值是 px,所以存在rpx 转 px 的问题.以 iPhone6 为基准,转换公式: // percent 为当前设备1rpx对应的px值 var percent = res.windowWidth / 750; 详情参考:WXSS尺寸单位

极速微信小程序开发,第一天

收到xx平台的合同确认的短信后,下午把手上的事情理完后.Get一项新技能之前和微信相关的单都是转出去给人家做,许久没有打代码了,前端的技术也忘的差不多了.还好现在项目选型的时候,通过讨论最终明确下来,采用时下流行的框架.如Vue,Angural,后端采用了go语言 一直认为微信就是js调用接口的玩意,使用微信封装好的公共方法来快速开发微信网站及小程序.看官们不要相信我的片面之词 还是从先从微信官方指引入手,第一感觉内容很简洁,配上了图,理解起来就更方便了. 今天我主要回顾一下,为了快速消化这个单

微信小程序源码下载(200多个)

微信小程序源码下载汇总,点击标题进入对应的微信小程序下载页面. 最新 demo源码(点击标题进入帖子下载) 描述 1 微信小程序 会议室预定小程序 微信小程序 会议室预定小程序**** 本内容被作者隐藏 **** 2 微信小程序-双人五子棋小游戏 微信小程序-双人五子棋小游戏**** 本内容被作者隐藏 **** 3 打卡签到小程序 用微信小程序实现的一个简单的打卡签到的小程序拒绝 4 微信小程序---左滑删除 微信小程序---左滑删除**** 本内容被作者隐藏 **** 5 一个借钱的记事本的微

金华网络公司:微信小程序的8个误区

小程序目前被炒得沸沸扬扬,无数媒体和企业借机获取阅读流量.这再次证明一点,微信想让什么火,真的就能让什么火.这种能力真是全中国再也没有人有了,政府也没有.但四处传的消息很多是失真的,废话不说,先列 ... 作者:金华腾云科技(钟先生18606796001) 小程序目前被炒得沸沸扬扬,无数媒体和企业借机获取阅读流量. 这再次证明一点,微信想让什么火,真的就能让什么火.这种能力真是全中国再也没有人有了,政府也没有. 但四处传的消息很多是失真的,废话不说,先列出8个多数人都搞错的问题: 1.小程序是H

微信小程序-整理各种小程序源码和资料免费下载

微信小程序整理下载 [小程序源码]微信小程序-车源宝微信版 [小程序源码]小程序-微赞社区(论坛demo) [小程序源码]微信小程序-收支账单 [小程序工具]微信小程序-日历 [小程序源码]小程序-在线聊天功能 [小程序源码]微信小程序-大好商城(新增功能天气查询和2048游戏) [小程序源码]微信小程序-查询号码归属地 [小程序源码]微信小程序-备忘录2 [小程序源码]微信小程序-QQ音乐 [小程序源码]小程序-货币汇率 [小程序源码]微信小程序-大学图书馆 [小程序源码]小程序-积分商城 [

微信小程序开发教程,大多数人都搞错的八个问题

小程序目前被炒得沸沸扬扬,无数媒体和企业借机获取阅读流量. 这再次证明一点,微信想让什么火,真的就能让什么火.这种能力真是全中国再也没有人有了,政府也没有. 但四处传的消息很多是失真的,废话不说,先列出8个多数人都搞错的问题: 小程序是HTML5: 小程序是B/S的: 把M站改改就可以接入到小程序里: 小程序体验不佳: 小程序适合低频长尾应用: 小程序是新的Appstore: 小程序做不起来,需求不高: 小程序会做起来,但会和原生应用长期并存. 以上8个是很多人凭直觉得出的结论,但真正深度调研和

高效编写微信小程序

原文:https://isux.tencent.com/high-performance-wechat-app-development.html 前言 微信小程序是一个工程,就和盖房子一样,打好了地基,才能保证后续工程师建立在可靠牢固的基础上. 笔者需要经常新建项目,每次都要重复"修改项目结构 -> 从老项目中复制粘贴文件 -> 删除一些老项目中代码"这样的过程,实在是-费心费力. 另一个痛点是:每次新建小程序页面要生成三个文件名相同的文件 ( .wxml..wxss 和