省市区三级联动（新）

http://www.cnblogs.com/xjwy/p/6861197.html

之前写了一篇关于省市区三级联动的博文，但是当时用的是本地文件的城市名称数据，所以处理起来很麻烦，最近用了腾讯地图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="width: 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_width: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

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