小程序组件开发中的有关省市区三级联动的相关介绍

效果图：

源码

index.wxml

<import src="../../templates/address-temp"/><template is="addressPicker"   data="{{provinceIndex:city.provinceIndex,cityIndex:city.cityIndex,districtIndex:city.districtIndex,province:city.province,   city:city.city[city.selectedProvince],district:city.district[city.selectedCity]}}"/>

index.js

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

address-temp.wxml

<?xml version="1.0" encoding="utf-8"?><template name="addressPicker">   <view style="display:flex;margin:0;height:100%;align-items: center;justify-content: center">     <view style="width:100%;">       <picker bindchange="bindProvinceChange" value="{{provinceIndex}}" range="{{province}}">         <view style="text-align:center;padding:10rpx;font-size:0.8rem">{{province[provinceIndex]}}</view>       </picker>     </view>      <view style="width:100%;">       <picker bindchange="bindCityChange" value="{{cityIndex}}" range="{{city}}">         <view style="text-align:center;padding:10rpx;font-size:0.8rem">{{city[cityIndex]}}</view>       </picker>     </view>      <view style="width:100%;">       <picker bindchange="bindDistrictChange" value="{{districtIndex}}" range="{{district}}">         <view style="text-align:center;padding:10rpx;font-size:0.8rem">{{district[districtIndex]}}</view>       </picker>     </view>   </view></template>

city.js

var city = {    province: ['-请选择-', '福建省'],    city: {        '-请选择-': ['-请选择-'],        '福建省': ['福州市', '厦门市', '泉州市']    },    district: {        '-请选择-': ['-请选择-'],        '福州市': ['鼓楼区', '台江区'],        '厦门市': ['湖里区', '集美区'],        '泉州市': ['晋江市', '安溪县']    },    provinceIndex: 0,    cityIndex: 0,    districtIndex: 0,    selectedProvince: '-请选择-',    selectedCity: '-请选择-',    selectedDistrct: '-请选择-'};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}