微信小程序省市联动功能

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

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

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

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

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

 template 
   view 
   view /view 
    view 
         view 
             text 取消 /text 
             text 确认 /text 
         /view 
         picker-view 
             picker-view-column 
             view {{item}} /view 
             /picker-view-column 
             picker-view-column 
             view {{item}} /view 
             /picker-view-column 
             picker-view-column 
             view {{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的引用：

 span >
然后是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  p 推荐教程：《 a href= https://www.php.cn/weixin-marketing.html target= _blank 微信小程序 /a 》 /p 
以上就是微信小程序省市联动功能的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！