小編給大家分享一下小程序組件開(kāi)發(fā)中省市區(qū)三級(jí)聯(lián)動(dòng)的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到瑪沁網(wǎng)站設(shè)計(jì)與瑪沁網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、空間域名、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋瑪沁地區(qū)。

• index.wxml

• index.js

  var city = require("../../utils/city.js");
Page({
    data: {},
    onLoad: function() {
        console.log('onLoad...');
        var that = this;
        city.init(that);
    }
});

• address-temp.wxml

 
   
     
       
        {{province[provinceIndex]}} 
       
      
     
       
        {{city[cityIndex]}} 
       
      
     
       
        {{district[districtIndex]}} 
       
     
  

• city.js

var city = {
    province: ['-請(qǐng)選擇-', '福建省'],
    city: {
        '-請(qǐng)選擇-': ['-請(qǐng)選擇-'],
        '福建省': ['福州市', '廈門市', '泉州市']
    },
    district: {
        '-請(qǐng)選擇-': ['-請(qǐng)選擇-'],
        '福州市': ['鼓樓區(qū)', '臺(tái)江區(qū)'],
        '廈門市': ['湖里區(qū)', '集美區(qū)'],
        '泉州市': ['晉江市', '安溪縣']
    },
    provinceIndex: 0,
    cityIndex: 0,
    districtIndex: 0,
    selectedProvince: '-請(qǐng)選擇-',
    selectedCity: '-請(qǐng)選擇-',
    selectedDistrct: '-請(qǐng)選擇-'
};
function init(that) {
    that.setData({
        'city': city
    });
    var bindProvinceChange = function(e) {
        var city = that.data.city;
        that.setData({
            'city.provinceIndex': e.detail.value,
            'city.selectedProvince': city.province[e.detail.value],
            'city.selectedCity': city.city[city.province[e.detail.value]][0],
            'city.selectedDistrct': city.district[city.city[city.province[e.detail.value]][0]][0],
            'city.cityIndex': 0,
            'city.districtIndex': 0
        });
    };
    var bindCityChange = function(e) {
        var city = that.data.city;
        that.setData({
            'city.cityIndex': e.detail.value,
            'city.selectedCity': city.city[city.selectedProvince][e.detail.value],
            'city.districtIndex': 0,
            'city.selectedDistrct': city.district[city.city[city.selectedProvince][e.detail.value]][0]
        });
    };
    var bindDistrictChange = function(e) {
        var city = that.data.city;
        that.setData({
            'city.districtIndex': e.detail.value,
            'city.selectedDistrct': city.district[city.selectedCity][e.detail.value]
        });
    };
    that['bindProvinceChange'] = bindProvinceChange;
    that['bindCityChange'] = bindCityChange;
    that['bindDistrictChange'] = bindDistrictChange;
}
module.exports = {
    init: init
}

看完了這篇文章，相信你對(duì)“小程序組件開(kāi)發(fā)中省市區(qū)三級(jí)聯(lián)動(dòng)的示例分析”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！