之前写了一篇关于省市区三级联动的博文，但是当时用的是本地文件的城市名称数据，所以处理起来很麻烦，最近用了腾讯地图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
转载请注明出处和作者，谢谢