溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細(xì)講解有關(guān)微信小程序怎么實(shí)現(xiàn)省市聯(lián)動(dòng)功能，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
首先呢，來(lái)看看效果，點(diǎn)擊文字‘點(diǎn)擊’，彈出選擇窗口，點(diǎn)擊取消或者確定（取消、確定按鈕在選擇框上邊，截圖有些不清楚），窗口下滑，
做這個(gè)我用的是picker-view這個(gè)組件，現(xiàn)在來(lái)看一看picker-view的屬性：
現(xiàn)在開(kāi)始寫(xiě)wxml的代碼，對(duì)了，插一句，我這里是把它寫(xiě)成一個(gè)模板的，先看看目錄結(jié)構(gòu)
我們先來(lái)看看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>接下來(lái)是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;
}好了這里的模板寫(xiě)好了，接下來(lái)是引用，引用就很簡(jiǎn)單了：
首先是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的引用（你沒(méi)看錯(cuò)就是一句）：
@import '../../teml/cascade.wxss';
接下來(lái)就是JS了：
在這里要先說(shuō)一下保存省市的名稱(chēng)的json文件格式，這個(gè)json文件里又全國(guó)的省市名稱(chēng)(這里只寫(xiě)了北京市為例子，這是我請(qǐng)求的數(shù)據(jù)的例子，你要根據(jù)你自己請(qǐng)求的數(shù)據(jù)來(lái)做一些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": "朝陽(yáng)區(qū)"
}, {
"id": 110106,
"name": "豐臺(tái)區(qū)"
}, {
"id": 110107,
"name": "石景山區(qū)"
}, {
"id": 110108,
"name": "海淀區(qū)"
}, {
"id": 110109,
"name": "門(mén)頭溝區(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)擊彈出選擇頁(yè)
dianji:function(){
//這里寫(xiě)了一個(gè)動(dòng)畫(huà)，讓其高度變?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)畫(huà)，然其高度變?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)畫(huà)，級(jí)聯(lián)選擇頁(yè)消失，效果和取消一樣
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);
},
//這里是判斷省市名稱(chēng)的顯示
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í)里面有沒(méi)有市（如數(shù)據(jù)中的香港、澳門(mén)等就沒(méi)有寫(xiě)市）
if(shengshi[sheng_index].regions[shi_index]){//這里是判斷這個(gè)選擇的省里面，有沒(méi)有相應(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，而這里的市根本沒(méi)有那么多，所以會(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ù)里面有沒(méi)有區(qū)縣
if(shengshi[sheng_index].regions[shi_index].regions[qu_index]){//這里是判斷選擇的這個(gè)市里有沒(méi)有下標(biāo)為qu_index的區(qū)縣，道理同上面市的選擇
console.log('這里判斷有沒(méi)有進(jìn)區(qū)里');
//有的話，把選擇的這個(gè)市里面的所有的區(qū)縣名字保存到qu這個(gè)數(shù)組中
for(let i=0;i< shengshi[sheng_index].regions[shi_index].regions.length;i++){
console.log('這里是寫(xiě)區(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è)市里面沒(méi)有區(qū)縣，那么把這個(gè)市的名字就賦值給qu這個(gè)數(shù)組
qu.push(shengshi[sheng_index].regions[shi_index].name);
}
}else{
//如果選擇的省里面沒(méi)有下標(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í)沒(méi)有市，那么就把省的名字作為市和區(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ǐng)求省市區(qū)的數(shù)據(jù)
wx.request({
url: 'https://wxxapp.duapp.com/quanguo.json',//由于服務(wù)器已關(guān)閉，這個(gè)地址已經(jīng)無(wú)法使用，請(qǐng)用自己的數(shù)據(jù)來(lái)寫(xiě)
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í)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼