這篇文章將為大家詳細(xì)講解有關(guān)微信小程序怎么實(shí)現(xiàn)省市聯(lián)動功能，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
成都創(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)擊取消或者確定（取消、確定按鈕在選擇框上邊，截圖有些不清楚），窗口下滑，
做這個我用的是picker-view這個組件，現(xiàn)在來看一看picker-view的屬性：
現(xiàn)在開始寫wxml的代碼，對了，插一句，我這里是把它寫成一個模板的，先看看目錄結(jié)構(gòu)
我們先來看看cascade.wxml里的代碼：
取消
確認(rèn)
{{item}}
{{item}}
{{item}}
接下來是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的引用：
點(diǎn)擊
?。簕{jieguo.sheng}}
市：{{jieguo.shi}}
區(qū)：{{jieguo.qu}}
然后是las.wxss的引用（你沒看錯就是一句）：
@import '../../teml/cascade.wxss';
接下來就是JS了：
在這里要先說一下保存省市的名稱的json文件格式，這個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": "豐臺區(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
}]}這里就是對數(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(){
//這里寫了一個動畫，讓其高度變?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(){
//這里也是動畫，然其高度變?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(){
//一樣是動畫，級聯(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);
},
//滾動選擇的時候觸發(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這個數(shù)組中
for (let i =0; i < shengshi.length; i++) {
sheng.push(shengshi[i].name)
}
if(shengshi[sheng_index].regions){//這里判斷這個省級里面有沒有市（如數(shù)據(jù)中的香港、澳門等就沒有寫市）
if(shengshi[sheng_index].regions[shi_index]){//這里是判斷這個選擇的省里面，有沒有相應(yīng)的下標(biāo)為shi_index的市，因?yàn)檫@里的下標(biāo)是前一次選擇后的下標(biāo)，比如之前選擇的一個省有10個市，我剛好滑到了第十個市，現(xiàn)在又重新選擇了省，但是這個省最多只有5個市，但是這時候的shi_index為9，而這里的市根本沒有那么多，所以會報(bào)錯
//這里如果有這個市，那么把選中的這個省中的所有的市的名字保存到shi這個數(shù)組中
for(let i=0;i< shengshi[sheng_index].regions.length;i++){
shi.push(shengshi[sheng_index].regions[i].name);
}
console.log('執(zhí)行了區(qū)級判斷');
if(shengshi[sheng_index].regions[shi_index].regions){//這里是判斷選擇的這個市在數(shù)據(jù)里面有沒有區(qū)縣
if(shengshi[sheng_index].regions[shi_index].regions[qu_index]){//這里是判斷選擇的這個市里有沒有下標(biāo)為qu_index的區(qū)縣，道理同上面市的選擇
console.log('這里判斷有沒有進(jìn)區(qū)里');
//有的話，把選擇的這個市里面的所有的區(qū)縣名字保存到qu這個數(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{
//如果這個市里面沒有區(qū)縣，那么把這個市的名字就賦值給qu這個數(shù)組
qu.push(shengshi[sheng_index].regions[shi_index].name);
}
}else{
//如果選擇的省里面沒有下標(biāo)為shi_index的市，那么把這個下標(biāo)的值賦值為0；然后再把選中的該省的所有的市的名字放到shi這個數(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{
//如果該省級沒有市，那么就把省的名字作為市和區(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
});
//有時候網(wǎng)絡(luò)慢，會出現(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)閉，這個地址已經(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)動功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
新聞名稱：微信小程序怎么實(shí)現(xiàn)省市聯(lián)動功能
瀏覽路徑：
http://weahome.cn/article/psiisp.html
重慶分公司
重慶分公司
