最近呢剛好做了一個(gè)省市聯(lián)動(dòng)的功能，今天看到有人問(wèn)這個(gè)怎么做，我就把我做的放上來(lái)共享一下：
首先呢，來(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里的代碼：
接下來(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的引用：
點(diǎn)擊　　?。?br>{
{
jieguo.sheng}
}
　　市：
{
{
jieguo.shi}
}
　　區(qū)：
{
{
jieguo.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 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;
ii++){
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;
ii++){
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;
ii++){
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;
ii++){
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 }
}
) }
}
)推薦教程：
《微信小程序》以上就是微信小程序省市聯(lián)動(dòng)功能的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
微信小程序 省市聯(lián)動(dòng)本文轉(zhuǎn)載于：
博客園，如有侵犯，請(qǐng)聯(lián)系[email protected]刪除
上一篇：
新手必備的微信小程序開(kāi)發(fā)指南
下一篇：
微信小程序轉(zhuǎn)發(fā)好友的功能相關(guān)文章相關(guān)視頻VUE2實(shí)現(xiàn)二級(jí)省市聯(lián)動(dòng)選擇利用JavaScript如何實(shí)現(xiàn)省市聯(lián)動(dòng)javascript實(shí)現(xiàn)省市聯(lián)動(dòng)的代碼分享如何使用JavaScript完成省市聯(lián)動(dòng)效果微信小程序省市聯(lián)動(dòng)功能 [溫州做小程序]