微信小程序?qū)崿F(xiàn)選擇地址省市區(qū)三級聯(lián)動
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)選擇地址省市區(qū)三級聯(lián)動的具體代碼,供大家參考,具體內(nèi)容如下
微信原生地址API,缺少省市區(qū)code,因此自己寫了一個(gè)收貨地址
思路:在onload預(yù)先加載全部省和第一個(gè)省的全部市和區(qū),加載全部會導(dǎo)致幾秒的事件阻塞。點(diǎn)擊選擇地址彈窗后,按需加載操作,滑動省加載對應(yīng)的市和第一個(gè)市對應(yīng)的區(qū),滑動市加載區(qū),滑動區(qū)只更改區(qū)的值
onLoad: function(options) { var that = this; // 此文件為全部省以及第一個(gè)省的市和區(qū) var cityData = districtLoad.districtLoad; // 存放省 const provinces = []; // 存放市 const citys = []; // 存放區(qū) const countys = []; for (let i = 0; i < cityData.length; i++) { provinces.push(cityData[i]); } for (let i = 0; i < cityData[0].sub.length; i++) { citys.push(cityData[0].sub[i]) } for (let i = 0; i < cityData[0].sub[0].sub.length; i++) { countys.push(cityData[0].sub[0].sub[i]) } that.setData({ provinces, citys, countys }) }
滑動省市區(qū)事件
bindChange: function(e) { var that = this; var val = e.detail.value var t = this.data.values; // 滑動省 if (val[0] != t[0]) { const citys = []; const countys = []; // 保存市 for (let i = 0; i < cityData[val[0]].sub.length; i++) { citys.push(cityData[val[0]].sub[i]) } // 保存第一個(gè)市的全部區(qū) for (let i = 0; i < cityData[val[0]].sub[0].sub.length; i++) { countys.push(cityData[val[0]].sub[0].sub[i]) } // 保存 this.setData({ province: cityData[val[0]].name, city: cityData[val[0]].sub[0].name, citys: citys, countys: countys, values: val, value: [val[0], 0, 0], fdeliveryProvince: this.data.provinces[val[0]].code, fdeliveryCity: cityData[val[0]].sub[0].code, }) // 防止只有省市的情況 if (cityData[val[0]].sub[0].sub.length!=0){ that.setData({ county: cityData[val[0]].sub[0].sub[0].name, fdeliveryArea: cityData[val[0]].sub[0].sub[0].code }) }else { that.setData({ county: '', fdeliveryArea:'' }) } return; } // 滑動市 if (val[1] != t[1]) { const countys = []; // 保存市 for (let i = 0; i < cityData[val[0]].sub[val[1]].sub.length; i++) { countys.push(cityData[val[0]].sub[val[1]].sub[i]) } // 保存 this.setData({ city: this.data.citys[val[1]].name, countys: countys, values: val, value: [val[0], val[1], 0], fdeliveryCity: this.data.citys[val[1]].code, }) // 防止只有省市的情況 if (countys.length != 0) { that.setData({ county: cityData[val[0]].sub[val[1]].sub[0].name, fdeliveryArea: cityData[val[0]].sub[val[1]].sub[0].code }) } else { that.setData({ county: '', fdeliveryArea: '' }) } return; } // 滑動區(qū) if (val[2] != t[2]) { this.setData({ county: this.data.countys[val[2]].name, values: val, fdeliveryArea: this.data.countys[val[2]].code }) return; } }
html
<view class="citypicker" wx:if="{{condition}}"> <view class="cityheader"> <view bindtap="open" class="city-cancel">取消</view> <view bindtap="open" class="city-true">確定</view> </view> <picker-view indicator-style="height: 40px;" style="font-size:30rpx; width: 100%; height: 290px;" value="{{value}}" bindchange="bindChange" class="citybody"> <picker-view-column> <view wx:for="{{provinces}}" wx:key="{{item.name}}" wx:code="{{item.code}}" style="line-height: 40px;padding-left:10px;">{{item.name}}</view> </picker-view-column> <picker-view-column> <view wx:for="{{citys}}" wx:key="{{item.name}}" wx:code="{{item.code}}" style="line-height: 40px;padding-left:10px;">{{item.name}}</view> </picker-view-column> <picker-view-column> <view wx:for="{{countys}}" wx:key="{{item.name}}" wx:code="{{item.code}}" style="line-height: 40px;padding-left:10px;">{{item.name}}</view> </picker-view-column> </picker-view> </view>
效果圖
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
layui中的tab控件點(diǎn)擊切換觸發(fā)事件
這篇文章主要介紹了layui中的tab控件點(diǎn)擊切換觸發(fā)事件,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06Openlayers實(shí)現(xiàn)地圖的基本操作
這篇文章主要為大家詳細(xì)介紹了Openlayers實(shí)現(xiàn)地圖的基本操作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09JavaScript將Table導(dǎo)出到Excel實(shí)現(xiàn)思路及代碼
將Table導(dǎo)出到Excel不是一件困難的事,很多語言都可以實(shí)現(xiàn),本文主要介紹下使用JavaScript實(shí)現(xiàn)將table導(dǎo)出到excel,思路很清晰感興趣的你不妨參考下哈2013-03-03詳解webpack+express多頁站點(diǎn)開發(fā)
這篇文章主要介紹了詳解webpack+express多頁站點(diǎn)開發(fā)2017-12-12