微信小程序怎么實(shí)現(xiàn)省市聯(lián)動(dòng)功能

這篇文章將為大家詳細(xì)講解有關(guān)微信小程序怎么實(shí)現(xiàn)省市聯(lián)動(dòng)功能，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)專注于長嶺網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。熱誠為您提供長嶺營銷型網(wǎng)站建設(shè)，長嶺網(wǎng)站制作、長嶺網(wǎng)頁設(shè)計(jì)、長嶺網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)公司服務(wù)，打造長嶺網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供長嶺網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

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

做這個(gè)我用的是picker-view這個(gè)組件，現(xiàn)在來看一看picker-view的屬性：

微信小程序怎么實(shí)現(xiàn)省市聯(lián)動(dòng)功能

現(xiàn)在開始寫wxml的代碼，對(duì)了，插一句，我這里是把它寫成一個(gè)模板的，先看看目錄結(jié)構(gòu)

微信小程序怎么實(shí)現(xiàn)省市聯(lián)動(dòng)功能

我們先來看看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">確認(rèn)</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">點(diǎn)擊</view>
<view>
　　<text>?。簕{jieguo.sheng}}</text>
　　<text>市：{{jieguo.shi}}</text>
　　<text>區(qū)：{{jieguo.qu}}</text>
</view>
<template is="cascade" data="{{animationData:animationData,sheng:sheng,shi:shi,qu:qu}}"/>

然后是las.wxss的引用（你沒看錯(cuò)就是一句）：

@import '../../teml/cascade.wxss';

接下來就是JS了：

在這里要先說一下保存省市的名稱的json文件格式，這個(gè)json文件里又全國的省市名稱(這里只寫了北京市為例子，這是我請求的數(shù)據(jù)的例子，你要根據(jù)你自己請求的數(shù)據(jù)來做一些JS的判斷)：

{
    "regions": [{
        "id": 110000,
        "name": "北京",
        "regions": [{
            "id": 110100,
            "name": "北京市",
            "regions": [{
                "id": 110101,
                "name": "東城區(qū)"
            }, {
                "id": 110102,
                "name": "西城區(qū)"
            }, {
                "id": 110103,
                "name": "崇文區(qū)"
            }, {
                "id": 110104,
                "name": "宣武區(qū)"
            }, {
                "id": 110105,
                "name": "朝陽區(qū)"
            }, {
                "id": 110106,
                "name": "豐臺(tái)區(qū)"
            }, {
                "id": 110107,
                "name": "石景山區(qū)"
            }, {
                "id": 110108,
                "name": "海淀區(qū)"
            }, {
                "id": 110109,
                "name": "門頭溝區(qū)"
            }, {
                "id": 110111,
                "name": "房山區(qū)"
            }, {
                "id": 110112,
                "name": "通州區(qū)"
            }, {
                "id": 110113,
                "name": "順義區(qū)"
            }, {
                "id": 110114,
                "name": "昌平區(qū)"
            }, {
                "id": 110115,
                "name": "大興區(qū)"
            }, {
                "id": 110116,
                "name": "懷柔區(qū)"
            }, {
                "id": 110117,
                "name": "平谷區(qū)"
            }, {
                "id": 110228,
                "name": "密云縣"
            }, {
                "id": 110229,
                "name": "延慶縣"
            }]
        }],
        "pinyin": "BeiJing",
        "hot": true,
        "municipality": true
    }]}

這里就是對(duì)數(shù)據(jù)進(jìn)行操作的las.js了

Page({
  data: {
      sheng: [],//獲取到的所有的省
      shi: [],//選擇的該省的所有市
      qu: [],//選擇的該市的所有區(qū)縣
      sheng_index:0,//picker-view省項(xiàng)選擇的value值
      shi_index:0,//picker-view市項(xiàng)選擇的value值
      qu_index:0,//picker-view區(qū)縣項(xiàng)選擇的value值
      shengshi:null,//取到該數(shù)據(jù)的所有省市區(qū)數(shù)據(jù)
      jieguo:{},//最后取到的省市區(qū)名字
      animationData: {}
  },
//點(diǎn)擊事件，點(diǎn)擊彈出選擇頁
  dianji:function(){
　　　　//這里寫了一個(gè)動(dòng)畫，讓其高度變?yōu)闈M屏
      var animation = wx.createAnimation({
          duration: 500,
            timingFunction: 'ease',
        })
        this.animation = animation
        animation.height(1332+'rpx').step()
        this.setData({
          animationData:animation.export()
        })

  },
//取消按鈕
  quxiao:function(){
　　　　//這里也是動(dòng)畫，然其高度變?yōu)?
      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);
  },
//確認(rèn)按鈕
  queren:function(){
　　　//一樣是動(dòng)畫，級(jí)聯(lián)選擇頁消失，效果和取消一樣
    var animation = wx.createAnimation({
          duration: 500,
            timingFunction: 'ease',
        })
        this.animation = animation
        animation.height(0+'rpx').step()
        this.setData({
          animationData:animation.export()
        });//打印最后選取的結(jié)果
      console.log(this.data.jieguo);
  },
//滾動(dòng)選擇的時(shí)候觸發(fā)事件
  bindChange: function(e) {
//這里是獲取picker-view內(nèi)的picker-view-column 當(dāng)前選擇的是第幾項(xiàng)

　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這個(gè)數(shù)組中
      for (let i =0; i < shengshi.length; i++) {
          sheng.push(shengshi[i].name)    
        }

        if(shengshi[sheng_index].regions){//這里判斷這個(gè)省級(jí)里面有沒有市（如數(shù)據(jù)中的香港、澳門等就沒有寫市）
            if(shengshi[sheng_index].regions[shi_index]){//這里是判斷這個(gè)選擇的省里面，有沒有相應(yīng)的下標(biāo)為shi_index的市，因?yàn)檫@里的下標(biāo)是前一次選擇后的下標(biāo)，比如之前選擇的一個(gè)省有10個(gè)市，我剛好滑到了第十個(gè)市，現(xiàn)在又重新選擇了省，但是這個(gè)省最多只有5個(gè)市，但是這時(shí)候的shi_index為9，而這里的市根本沒有那么多，所以會(huì)報(bào)錯(cuò)
　　　　　　　　　　//這里如果有這個(gè)市，那么把選中的這個(gè)省中的所有的市的名字保存到shi這個(gè)數(shù)組中
                for(let i=0;i< shengshi[sheng_index].regions.length;i++){
                    shi.push(shengshi[sheng_index].regions[i].name);
                }
                 console.log('執(zhí)行了區(qū)級(jí)判斷');
               
                if(shengshi[sheng_index].regions[shi_index].regions){//這里是判斷選擇的這個(gè)市在數(shù)據(jù)里面有沒有區(qū)縣
             if(shengshi[sheng_index].regions[shi_index].regions[qu_index]){//這里是判斷選擇的這個(gè)市里有沒有下標(biāo)為qu_index的區(qū)縣，道理同上面市的選擇
               console.log('這里判斷有沒有進(jìn)區(qū)里');
　　　　　　　　　　　　//有的話，把選擇的這個(gè)市里面的所有的區(qū)縣名字保存到qu這個(gè)數(shù)組中
                    for(let i=0;i< shengshi[sheng_index].regions[shi_index].regions.length;i++){
                      console.log('這里是寫區(qū)得');
                        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{
　　　　　　　　　　　　//如果這個(gè)市里面沒有區(qū)縣，那么把這個(gè)市的名字就賦值給qu這個(gè)數(shù)組
                  qu.push(shengshi[sheng_index].regions[shi_index].name);
                }
            }else{
　　　　　　//如果選擇的省里面沒有下標(biāo)為shi_index的市，那么把這個(gè)下標(biāo)的值賦值為0；然后再把選中的該省的所有的市的名字放到shi這個(gè)數(shù)組中
              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{
　　　　　　//如果該省級(jí)沒有市，那么就把省的名字作為市和區(qū)的名字
                shi.push(shengshi[sheng_index].name);
                qu.push(shengshi[sheng_index].name);
        }
       
        console.log(sheng);
        console.log(shi);
        console.log(qu);
        //選擇成功后把相應(yīng)的數(shù)組賦值給相應(yīng)的變量
        that.setData({
              sheng: sheng,
              shi: shi,
              qu: qu
        });
　　　　//有時(shí)候網(wǎng)絡(luò)慢，會(huì)出現(xiàn)區(qū)縣選擇出現(xiàn)空白，這里是如果出現(xiàn)空白那么執(zhí)行一次回調(diào)
        if(sheng.length==0||shi.length==0||qu.length==0){
              that.jilian();
              console.log('這里執(zhí)行了回調(diào)');
              // console.log();
        }
        console.log(sheng[that.data.sheng_index]);
        console.log(shi[that.data.shi_index]);
        console.log(qu[that.data.qu_index]);
　　　　//把選擇的省市區(qū)都放到j(luò)ieguo中
        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;
//請求省市區(qū)的數(shù)據(jù)
      wx.request({
        url: 'https://wxxapp.duapp.com/quanguo.json',//由于服務(wù)器已關(guān)閉，這個(gè)地址已經(jīng)無法使用，請用自己的數(shù)據(jù)來寫
        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
        }
      })
  }
})

關(guān)于“微信小程序怎么實(shí)現(xiàn)省市聯(lián)動(dòng)功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

新聞標(biāo)題：微信小程序怎么實(shí)現(xiàn)省市聯(lián)動(dòng)功能
網(wǎng)站URL：http://jinyejixie.com/article38/psiisp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、Google、用戶體驗(yàn)、網(wǎng)站導(dǎo)航、網(wǎng)站維護(hù)、企業(yè)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

微信小程序怎么實(shí)現(xiàn)省市聯(lián)動(dòng)功能