您好,登錄后才能下訂單哦!
小編給大家分享一下小程序組件開發(fā)中省市區(qū)三級聯(lián)動(dòng)的示例分析,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
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: { '-請選擇-': ['-請選擇-'], '福州市': ['鼓樓區(qū)', '臺(tái)江區(qū)'], '廈門市': ['湖里區(qū)', '集美區(qū)'], '泉州市': ['晉江市', '安溪縣'] }, 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 }
看完了這篇文章,相信你對“小程序組件開發(fā)中省市區(qū)三級聯(lián)動(dòng)的示例分析”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。