省市區三級聯動（新）

以前寫了一篇關於省市區三級聯動的博文，可是當時用的是本地文件的城市名稱數據，因此處理起來很麻煩，最近用了騰訊地圖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

轉載請註明出處和做者，謝謝