小程序组件开发中省市区三级联动的示例分析-创新互联
小编给大家分享一下小程序组件开发中省市区三级联动的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
勐海网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作,到程序开发,运营维护。创新互联2013年开创至今到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联。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: ['-请选择-', '福建省'], 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 }
看完了这篇文章,相信你对“小程序组件开发中省市区三级联动的示例分析”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
本文题目:小程序组件开发中省市区三级联动的示例分析-创新互联
新闻来源:http://pwwzsj.com/article/decsii.html