省市区三级联动（新）

之前写了一篇关于省市区三级联动的博文，但是当时用的是本地文件的城市名称数据，所以处理起来很麻烦，最近用了腾讯地图api提供省市区的名称数据，感觉简单多了，所以在此和大家分享一下：

效果图如下：（由于当时功能的需要，我只是写了省市，区的话可以根据数据来操作）

首先看看目录结构

 先看cascade.wxml的代码：

<template name="cascade">
  <view class="cascade_box" animation="{{animationData}}">
  <view class="cascade_hei" catchtap="quxiao"></view>
   <view class="cascade_find">
        <view class="cascade_header">
            <text class='quxiao' catchtap="cancel">取消</text>
            <text class="queren" catchtap="confirm">确认</text>
        </view>
        <picker-view indicator-style="height: 80rpx;" style=" 100%; height: 400rpx;" bindchange="citychange">
            <picker-view-column>
                <view wx:for="{{sheng}}" wx:key='this' style="line-height: 80rpx;text-align:center;">{{item.fullname}}</view>
            </picker-view-column>
            <picker-view-column>
                <view wx:for="{{shi}}" wx:key='this' style="line-height: 80rpx;text-align:center;">{{item.fullname}}</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;
    z-index: 99;
}
.cascade_hei{
    width: 100%;
    height:55%;
    background: #000;
    opacity: 0.5;
}
.cascade_find{
    width: 100%;
    height: 45%;
    position: relative;
    background: #fff;
}
.quxiao,.queren{
    display: block;
    position: absolute;
    width: 100rpx;
    height: 80rpx;
    line-height: 80rpx;
    /*background: #00f;*/
    text-align: center;
    /*color: #16346a;*/
    color: #a2a2a2;
}
.queren{
    right: 0;
    top: 0;
    color: #0f0;
}
.cascade_header{
    height: 80rpx;
    width: 100%;
    margin-bottom: 20rpx;
}

 然后就是在你要用的地方引用模板：

<!--这里的路径依你的文件路径为准-->
<view class='find_box' catchtap="city">
  <text class='find_title'>家乡</text>
  <image class='jinru' src="https://wxxdachu.duapp.com/img/jinru.png"></image>
  <text class="diqu">{{diqu.sheng}}-{{diqu.shi}}</text>
</view>
<import src="../../template/cascade/cascade.wxml"/>
<template is="cascade" data="{{animationData:animationData,sheng:sheng,shi:shi}}"/>

相应的wxss中引用：

/*这里的路径依你的文件路径为准*/
@import '../../template/cascade/cascade.wxss';
.find_box{
border-bottom: 1rpx solid #ddd;
width: 100%;
height: 100rpx;
}
.jinru{
width:20rpx;
height: 35rpx;
float: right;
margin: 35rpx 30rpx 0 20rpx;
}
.find_title{
display: block;
float: left;
line-height: 100rpx;
height: 100rpx;
}

.diqu{
display: block;
height: 100rpx;
line-height: 100rpx;
float: right;
color: #a2a2a2;
}

现在开始就是JS了：

var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js');//引用下载的sdk文件
var qqmapsdk;//定义一个变量
var app=getApp();
Page({
  data:{
    sheng: [],
    shi: [],
    sheng_index:0,
    shi_index:0,
    jieguo:{},
    animationData:{},
    win_height:0,
    win_0,
    province:[],
    cityname:[]
  },//点击家乡触发按钮
city:function(){
    console.log('这里是地区按钮');
//这里是动画
      var animation = wx.createAnimation({
          duration: 500,
            timingFunction: 'ease',
        })
        this.animation = animation
        animation.height(this.data.win_height).step()
        this.setData({
          animationData:animation.export()
        })
        if(this.data.cityname&&this.data.cityname.length>0){
         this.jilian();
        }
  }, 
//点击取消触发
  cancel:function(){
      var animation = wx.createAnimation({
          duration: 500,
            timingFunction: 'ease',
        })

        this.animation = animation

        animation.height(0+'rpx').step()

        this.setData({
          animationData:animation.export()
        });
        this.setData({
            jieguo:{}
        });
        console.log(this.data.jieguo);
  },
//点击确认触发
  confirm: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);
      this.setData({
          diqu:this.data.jieguo
      });
      console.log(this.data.diqu);
      console.log(this.data.diqu.sheng);
  },
  //当地区滚动的时候触发
  citychange: function(e) {
    var val = e.detail.value
    this.setData({
      sheng_index: val[0],
      shi_index: val[1]
    })
    console.log(val);
    console.log(this.data.cityname&&this.data.cityname.length>0);
    if(this.data.cityname&&this.data.cityname.length>0){
      console.log('这里运行级联');
        this.jilian();
    }
  },
//这里获取省市的相应名称数据
  jilian:function(){
      var that=this,
          prov_index=that.data.sheng_index,
          city_index=that.data.shi_index,
          prov=that.data.province,
          city=that.data.cityname,
          cityarr=[];
      cityarr=city.slice(prov[prov_index].cidx[0],prov[prov_index].cidx[1]+1);
      that.setData({
          sheng:prov,
          shi:cityarr
      });
      if(cityarr[city_index]){
         that.setData({
          jieguo:{sheng:prov[prov_index].fullname,shi:cityarr[city_index].fullname}
      });
      }
  },
onLoad:function(options){
    var that=this;
    if(options.id){
      that.setData({
        modify:true
      });
    }
    qqmapsdk = new QQMapWX({
            key: '你申请的key值'
        });//这里面的key是你自己申请腾讯地图的key的值
    qqmapsdk.getCityList({//获取所有省市区
      success:function(res){
        // console.log(res.result[0]);//获取所有省
        // console.log(res.result[1].slice(res.result[0][22].cidx[0],res.result[0][22].cidx[1]+1));//该省的所有市
        // console.log(res.result[2].slice(res.result[1][res.result[0][22].cidx[0]].cidx[0],res.result[1][res.result[0][22].cidx[0]].cidx[1]+1));//该市的所有区县
         that.setData({
          province:res.result[0],
          cityname:res.result[1]
        });

      },complete:function(res){
        console.log(res);
        that.jilian();
      }
    });
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

总体就是这样，申请腾讯地图的key和下载sdk还有一些api的使用介绍 http://lbs.qq.com/qqmap_wx_jssdk/index.html 这里都有详细的说明，想了解更多的小程序的知识请添加微信小程序开发交流群：368506119

转载请注明出处和作者，谢谢