最近呢剛好做了一個省市聯(lián)動的功能，今天看到有人問這個怎么做，我就把我做的放上來共享一下：
首先呢，來看看效果，點擊文字‘點擊’，彈出選擇窗口，點擊取消或者確定（取消、確定按鈕在選擇框上邊，截圖有些不清楚），窗口下滑，做這個我用的是picker-view這個組件，現(xiàn)在來看一看picker-view的屬性：
現(xiàn)在開始寫wxml的代碼，對了，插一句，我這里是把它寫成一個模板的，先看看目錄結構我們先來看看cascade.wxml里的代碼：
接下來是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的引用：
點擊　　省：
{
{
jieguo.sheng}
}
　　市：
{
{
jieguo.shi}
}
　　區(qū)：
{
{
jieguo.qu}
}
然后是las.wxss的引用（你沒看錯就是一句）：
@import '
../../teml/cascade.wxss'
;
接下來就是JS了：
在這里要先說一下保存省市的名稱的json文件格式，這個json文件里又全國的省市名稱(這里只寫了北京市為例子，這是我請求的數據的例子，你要根據你自己請求的數據來做一些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 }
]}
這里就是對數據進行操作的las.js了Page({
data: {
sheng: [],//獲取到的所有的省 shi: [],//選擇的該省的所有市 qu: [],//選擇的該市的所有區(qū)縣 sheng_index:0,//picker-view省項選擇的value值 shi_index:0,//picker-view市項選擇的value值 qu_index:0,//picker-view區(qū)縣項選擇的value值 shengshi:null,//取到該數據的所有省市區(qū)數據 jieguo:{
}
,//最后取到的省市區(qū)名字 animationData: {
}
}
, //點擊事件，點擊彈出選擇頁 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);
}
, //確認按鈕 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() }
);
//打印最后選取的結果 console.log(this.data.jieguo);
}
, //滾動選擇的時候觸發(fā)事件 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 i++) {
sheng.push(shengshi[i].name) }
if(shengshi[sheng_index].regions){
//這里判斷這個省級里面有沒有市（如數據中的香港、澳門等就沒有寫市） if(shengshi[sheng_index].regions[shi_index]){
//這里是判斷這個選擇的省里面，有沒有相應的下標為shi_index的市，因為這里的下標是前一次選擇后的下標，比如之前選擇的一個省有10個市，我剛好滑到了第十個市，現(xiàn)在又重新選擇了省，但是這個省最多只有5個市，但是這時候的shi_index為9，而這里的市根本沒有那么多，所以會報錯 　　　　　　　　　　//這里如果有這個市，那么把選中的這個省中的所有的市的名字保存到shi這個數組中 for(let i=0;
ii++){
shi.push(shengshi[sheng_index].regions[i].name);
}
console.log('
執(zhí)行了區(qū)級判斷'
);
if(shengshi[sheng_index].regions[shi_index].regions){
//這里是判斷選擇的這個市在數據里面有沒有區(qū)縣 if(shengshi[sheng_index].regions[shi_index].regions[qu_index]){
//這里是判斷選擇的這個市里有沒有下標為qu_index的區(qū)縣，道理同上面市的選擇 console.log('
這里判斷有沒有進區(qū)里'
);
　　　　　　　　　　　　//有的話，把選擇的這個市里面的所有的區(qū)縣名字保存到qu這個數組中 for(let i=0;
ii++){
console.log('
這里是寫區(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{
　　　　　　　　　　　　//如果這個市里面沒有區(qū)縣，那么把這個市的名字就賦值給qu這個數組 qu.push(shengshi[sheng_index].regions[shi_index].name);
}
}
else{
　　　　　　//如果選擇的省里面沒有下標為shi_index的市，那么把這個下標的值賦值為0；然后再把選中的該省的所有的市的名字放到shi這個數組中 that.setData({
shi_index:0 }
);
for(let i=0;
ii++){
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);
//選擇成功后把相應的數組賦值給相應的變量 that.setData({
sheng: sheng, shi: shi, qu: qu }
);
　　　　//有時候網絡慢，會出現(xiàn)區(qū)縣選擇出現(xiàn)空白，這里是如果出現(xiàn)空白那么執(zhí)行一次回調 if(sheng.length==0||shi.length==0||qu.length==0){
that.jilian();
console.log('
這里執(zhí)行了回調'
);
// console.log();
}
console.log(sheng[that.data.sheng_index]);
console.log(shi[that.data.shi_index]);
console.log(qu[that.data.qu_index]);
　　　　//把選擇的省市區(qū)都放到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;
//請求省市區(qū)的數據 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 }
}
) }
}
)推薦教程：
《微信小程序》以上就是微信小程序省市聯(lián)動功能的詳細內容，更多請關注php中文網其它相關文章！
微信
分享相關標簽：
微信小程序 省市聯(lián)動本文轉載于：
博客園，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
新手必備的微信小程序開發(fā)指南
下一篇：
微信小程序轉發(fā)好友的功能相關文章相關視頻VUE2實現(xiàn)二級省市聯(lián)動選擇利用JavaScript如何實現(xiàn)省市聯(lián)動javascript實現(xiàn)省市聯(lián)動的代碼分享如何使用JavaScript完成省市聯(lián)動效果微信小程序省市聯(lián)動功能 [溫州做小程序]