演示微信小程序地區選擇偽五級聯動

3403771864 發布于2022-11-08 23:27 / 382人閱讀

　　在項目中，要求微信小程序的地區可以選擇偽五級聯動

　　展示如下

　　這里采用的是自定義多列選擇器picker mode="multiSelector"

　　<view class="section">
　　<view class="section__title">多列選擇器</view>
　　<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
　　<view wx:if="{{multiIndex[0]==0}}" class="picker" style='font-size:24rpx'>
　　當前選擇：全國
　　</view>
　　<view wx:elif="{{multiIndex[1]==0}}" class="picker" style='font-size:24rpx'>
　　當前選擇：{{multiArray[0][multiIndex[0]]}}
　　</view>
　　<view wx:elif="{{multiIndex[2]==0}}" class="picker" style='font-size:24rpx'>
　　當前選擇：{{multiArray[0][multiIndex[0]]}}-{{multiArray[1][multiIndex[1]]}}
　　</view>
　　<view wx:elif="{{multiIndex[3]==0}}" class="picker" style='font-size:24rpx'>
　　當前選擇：{{multiArray[0][multiIndex[0]]}}-{{multiArray[1][multiIndex[1]]}}-{{multiArray[2][multiIndex[2]]}}
　　</view>
　　<view wx:else class="picker" style='font-size:24rpx'>
　　當前選擇：{{multiArray[0][multiIndex[0]]}}-{{multiArray[1][multiIndex[1]]}}-{{multiArray[2][multiIndex[2]]}}-{{multiArray[3][multiIndex[3]]}}
　　</view>
　　</picker>
　　</view>

　　multiArray包含4個數組（省市縣鎮），multiIndex是4個數組對應選中下標

　　onLoad: async function (options) {
　　let chinaData = await getCountryList()
　　chinaData.unshift({city: [],code: 0,name: "全部"})
　　for(let one of chinaData){
　　one.city.unshift({county: [],code: 0,name: "全部"})
　　for(let two of one.city){
　　two.county.unshift({code: 0,name: "全部"})
　　}
　　}
　　this.data.chinaData = chinaData;
　　let sheng = []; // 設置省數組
　　for(let i = 0; i < chinaData.length; i++) {
　　sheng.push(chinaData[i].name);
　　}
　　this.setData({
　　"multiArray[0]": sheng
　　})
　　this.getCity(); // 得到市
　　},
　　bindMultiPickerChange: function(e) {
　　console.log(e);
　　},
　　bindMultiPickerColumnChange: function(e) {
　　let move = e.detail;
　　let index = move.column;
　　let value = move.value;
　　if (index == 0) {
　　this.setData({
　　multiIndex: [value,0,0,0]
　　})
　　this.getCity();
　　}
　　if (index == 1) {
　　this.setData({
　　"multiIndex[1]": value,
　　"multiIndex[2]": 0,
　　"multiIndex[3]": 0
　　})
　　this.getXian();
　　}
　　if (index == 2) {
　　this.setData({
　　"multiIndex[2]": value,
　　"multiIndex[3]": 0,
　　})
　　this.getZhen();
　　}
　　if (index == 3) {
　　this.setData({
　　"multiIndex[3]": value
　　})
　　this.getZhen();
　　}
　　},
　　getCity: function() { // 得到市
　　let shengNum = this.data.multiIndex[0];
　　let chinaData = this.data.chinaData;
　　let cityData = chinaData[shengNum].city;
　　let city = [];
　　for (let i = 0; i < cityData.length; i++) {
　　city.push(cityData[i].name)
　　}
　　this.setData({
　　"multiArray[1]": city
　　})
　　this.getXian();
　　},
　　getXian: function(e) { // 得到縣
　　let shengNum = this.data.multiIndex[0];
　　let cityNum = this.data.multiIndex[1];
　　let chinaData = this.data.chinaData;
　　let xianData = chinaData[shengNum].city[cityNum].county;
　　let xian = [];
　　for (let i = 0; i < xianData.length; i++) {
　　xian.push(xianData[i].name)
　　}
　　this.setData({
　　"multiArray[2]": xian
　　})
　　this.getZhen();
　　},
　　async getZhen(){// 得到鎮
　　let shengNum = this.data.multiIndex[0];
　　let cityNum = this.data.multiIndex[1];
　　let xianNum = this.data.multiIndex[2];
　　let chinaData = this.data.chinaData;
　　let zhen = [];
　　if(chinaData[shengNum].city[cityNum].county[xianNum].code == 0){
　　this.setData({
　　"multiArray[3]" : ["全部"]
　　})
　　}else{
　　//這里需要傳縣的code值獲取鎮的數據
　　let res = await getTownByCounty(chinaData[shengNum].city[cityNum].county[xianNum].code)
　　let zhenData = JSON.parse(res.data.data.json)
　　zhenData.unshift({code: 0,name: "全部"})
　　for (let i = 0; i < zhenData.length; i++) {
　　zhen.push(zhenData[i].name)
　　}
　　this.setData({
　　"multiArray[3]" : zhen
　　})
　　}
　　}

　　省市縣數據返回類型

　　鎮返回數據

內容已講述完畢，歡迎大家關注后續更多精彩內容。

云服務器 GPU云服務器微信小程序微信小程序支付微信小程序部署微信小程序搭建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/128281.html

初嘗微信小程序2-基本框架

摘要：有的文件不是必須的，可以參考微信小程序官方文檔。應用程序和頁面之間的關系微信小程序允許縱向級數最高五級，后面會介紹導航組件，設置幾級頁面以及之間的跳轉。基本框架： .wxml ：頁面骨架 .wxss ：頁面樣式 .js ：頁面邏輯? ? 描述一些行為 .json ：頁面配置創建一個小程序之后，app.js,app.json,app.wxss是必須的，而且名字也不能隨意更改，這些是作用于AP...

weij 2019-04-23 13:33 評論0 收藏0
微信小程序頁面間通信的5種方式

摘要：另外因為依賴，而可能出現讀寫失敗，從面造成通信失敗注意點頁面初始化時也會觸發方式二小程序同方式一一樣，利用激活方法，通過讀寫小程序完成數據傳遞清隊上次通信數據優點實現簡單，實現理解。微信小程序頁面間通的5種方式 PageModel（頁面模型）對小程序而言是很重要的一個概念，從app.json中也可以看到，小程序就是由一個個頁面組成的。 showImg(https://segmentf...

lei___ 2019-08-20 15:29 評論0 收藏0
大廠程序員接私活被坑，還被放鴿子，那源碼就開源-基于SSM仿知乎小程序

摘要：最近很郁悶，一個女粉絲找我要開發一個系統。但是后來，越扯越嚴重上升到塊要開發一個知乎的高度。主要實現了仿知乎微信小程序的文件管理功能。點擊下面，回復小程序最近很郁悶，一個女粉絲找我要開發一個系統。說是很著急。 ? 但是費用不高，說自己沒錢。 ? 我平時事也很多，又不是很想接。 ? 說了一大...

dongxiawu 2021-11-11 16:55 評論0 收藏0
教你從零開始使用wordpress生成微信小程序（小白版教程）

摘要：準備工作服務器最好使用服務器，小白推薦安裝寶塔面板。備案域名小程序賬號建議注冊企業賬號，可以使用已認證的公眾號快速創建。七牛賬號使用，加快網站訪問速度。如需使用小程序發帖，也會用到。注意不要使用以下的。 showImg(https://segmentfault.com/img/bVUUeU?w=600&h=280); 準備工作 1服務器最好使用Linux服務器，小白推薦安裝寶塔面板。...

jaysun 2019-06-28 13:43 評論0 收藏0
微信小程序[第十一篇] -- 添加照片（小程序圖片上傳功能）

摘要：注拍照功能在某些機型上還有閃退現象，希望微信官方可以盡快完善。這涉及到函數，這是微信小程序內置的，用來上傳一個文件，有幾個點要說下綠色框要上傳文件資源的路徑，也就是我們相冊里選擇的圖片路徑。我們喜歡小程序的原因之一就是它提供了更多和手機系統交互的接口，比如今天要說的這個從相冊選擇 / 拍照功能。注：拍照功能在某些機型上還有閃退現象，希望微信官方可以盡快完善。在上一篇中我們搞定了相冊...

muzhuyu 2019-06-28 14:14 評論0 收藏0