微信小程序省市聯動

最近呢恰好作了一個省市聯動的功能，今天看到有人問這個怎麼作，我就把我作的放上來共享一下：

首先呢，來看看效果，點擊文字‘點擊’，彈出選擇窗口，點擊取消或者肯定（取消、肯定按鈕在選擇框上邊，截圖有些不清楚），窗口下滑，

 

 

作這個我用的是picker-view這個組件，如今來看一看picker-view的屬性：

如今開始寫wxml的代碼，對了，插一句，我這裏是把它寫成一個模板的，先看看目錄結構

咱們先來看看cascade.wxml裏的代碼：

<template name="cascade">
  <view class="cascade_box" animation="{{animationData}}">
  <view class="cascade_hei"></view>
   <view class="cascade_find">
        <view class="cascade_header">
            <text class='quxiao' catchtap="quxiao">取消</text>
            <text class="queren" catchtap="queren">確認</text>
        </view>
        <picker-view indicator-style="height: 80rpx;" style="width: 100%; height: 400rpx;" bindchange="bindChange">
            <picker-view-column>
            <view wx:for="{{sheng}}" wx:key='this' style="line-height: 80rpx;text-align:center;">{{item}}</view>
            </picker-view-column>
            <picker-view-column>
            <view wx:for="{{shi}}" wx:key='this' style="line-height: 80rpx;text-align:center;">{{item}}</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; } .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的引用：

<import src="../../teml/cascade.wxml"/>
<view bindtap="dianji">點擊</view>
<view>
　　<text>省：{{jieguo.sheng}}</text>
　　<text>市：{{jieguo.shi}}</text>
　　<text>區：{{jieguo.qu}}</text>
</view>
<template is="cascade" data="{{animationData:animationData,sheng:sheng,shi:shi,qu:qu}}"/>

而後是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 < shengshi.length; i++) { sheng.push(shengshi[i].name) } if(shengshi[sheng_index].regions){//這裏判斷這個省級裏面有沒有市（如數據中的香港、澳門等就沒有寫市）
            if(shengshi[sheng_index].regions[shi_index]){//這裏是判斷這個選擇的省裏面，有沒有相應的下標爲shi_index的市，由於這裏的下標是前一次選擇後的下標，好比以前選擇的一個省有10個市，我恰好滑到了第十個市，如今又從新選擇了省，可是這個省最多隻有5個市，可是這時候的shi_index爲9，而這裏的市根本沒有那麼多，因此會報錯
　　　　　　　　　　//這裏若是有這個市，那麼把選中的這個省中的全部的市的名字保存到shi這個數組中
                for(let i=0;i< shengshi[sheng_index].regions.length;i++){ shi.push(shengshi[sheng_index].regions[i].name); } console.log('執行了區級判斷'); if(shengshi[sheng_index].regions[shi_index].regions){//這裏是判斷選擇的這個市在數據裏面有沒有區縣
             if(shengshi[sheng_index].regions[shi_index].regions[qu_index]){//這裏是判斷選擇的這個市裏有沒有下標爲qu_index的區縣，道理同上面市的選擇
               console.log('這裏判斷有沒有進區裏'); 　　　　　　　　　　　　//有的話，把選擇的這個市裏面的全部的區縣名字保存到qu這個數組中
                    for(let i=0;i< shengshi[sheng_index].regions[shi_index].regions.length;i++){ console.log('這裏是寫區得'); qu.push(shengshi[sheng_index].regions[shi_index].regions[i].name); } }else{ 　　　　　　　　　　//這裏和選擇市的道理同樣
 that.setData({ qu_index:0 }); for(let i=0;i< shengshi[sheng_index].regions[shi_index].regions.length;i++){ qu.push(shengshi[sheng_index].regions[shi_index].regions[i].name); } }}else{ 　　　　　　　　　　　　//若是這個市裏面沒有區縣，那麼把這個市的名字就賦值給qu這個數組
 qu.push(shengshi[sheng_index].regions[shi_index].name); } }else{ 　　　　　　//若是選擇的省裏面沒有下標爲shi_index的市，那麼把這個下標的值賦值爲0；而後再把選中的該省的全部的市的名字放到shi這個數組中
 that.setData({ shi_index:0 }); for(let i=0;i< shengshi[sheng_index].regions.length;i++){ shi.push(shengshi[sheng_index].regions[i].name); } } }else{ 　　　　　　//若是該省級沒有市，那麼就把省的名字做爲市和區的名字
 shi.push(shengshi[sheng_index].name); qu.push(shengshi[sheng_index].name); } console.log(sheng); console.log(shi); console.log(qu); //選擇成功後把相應的數組賦值給相應的變量
 that.setData({ sheng: sheng, shi: shi, qu: qu }); 　　　　//有時候網絡慢，會出現區縣選擇出現空白，這裏是若是出現空白那麼執行一次回調
        if(sheng.length==0||shi.length==0||qu.length==0){ that.jilian(); console.log('這裏執行了回調'); // console.log();
 } console.log(sheng[that.data.sheng_index]); console.log(shi[that.data.shi_index]); console.log(qu[that.data.qu_index]); 　　　　//把選擇的省市區都放到jieguo中
        let jieguo={ sheng:sheng[that.data.sheng_index], shi:shi[that.data.shi_index], qu:qu[that.data.qu_index] }; 　　 that.setData({ jieguo:jieguo }); }, onLoad:function(){ var that=this; //請求省市區的數據
 wx.request({ url: 'https://wxxapp.duapp.com/quanguo.json',//因爲服務器已關閉，這個地址已經沒法使用，請用本身的數據來寫 data: {}, method: 'GET', success: function(res){ // success
 console.log(res.data.regions); // shengshi=res.data.regions
 that.setData({ shengshi:res.data.regions }); 　　　　　　 that.jilian(); }, fail: function() { // fail
 }, complete: function() { // complete
 } }) } })

 

 這裏要注意你請求的省市區的數據格式，必定要細心，我這裏常常就是不細心致使一些錯誤，想了解更多的小程序的知識請添加微信小程序開發交流羣：368506119