小程序如何进行地区选择器 实现、调用？

本篇文章给大家带来的内容是关于小程序如何进行地区选择器 实现、调用，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

var api = require( #39;../../../utils/api/index.js #39;);var constants = require( #39;../../../utils/api/lib/constants #39;);var raw = require( #39;../../../utils/citys #39;);
Component({
 options: {
 multipleSlots: true
 data: {
 select:[0,0],
 region: [Object.keys(raw), raw[Object.keys(raw)[0]]],
 province: ,
 city: 
 properties: {
 target: {
 type: Array,
 value: [],
 observer: #39;update #39;
 methods: {
 update: function (newVal, oldVal) {
 if(!newVal || newVal.length 2)return; var province = newVal[0]; var city = newVal[1]; var region = this.data.region; //update province
 var pro_index = region[0].indexOf(province); if (pro_index 0)return;
 region = [region[0], raw[province]]; //update city
 var city_index = region[1].indexOf(city); if (city_index 0) return; this.setData({
 select: [pro_index,city_index],
 region: region,
 province: province,
 city: city
 bindChange: function (e) {
 if (!e.detail.value || e.detail.value.length 2)return; var region = this.data.region; var pro_index = e.detail.value[0]; var city_index = e.detail.value[1]; this.setData({
 province: region[0][pro_index],
 city: region[1][city_index]
 }) this.notify();
 bindColumnChange: function (e) {
 if (e.detail.column === 0) { var region = this.data.region; var province = region[0][e.detail.value]; this.setData({ 
 region: [region[0], raw[province]] 
 notify() { this.triggerEvent( #39;regionChange #39;, { province: this.data.province, city: this.data.city }, {})
})

region-widget.wxml

 picker 
 mode= multiSelector 
 value= {{select}} 
 range= {{region}} 
 bindchange= bindChange 
 bindcolumnchange= bindColumnChange 
 slot /slot /picker 

city.js

var citys = { #39;北京市 #39;: [ #39;市辖区 #39;], #39;天津市 #39;: [ #39;市辖区 #39;],
 #39;河北省 #39;: [ #39;石家庄市 #39;, #39;唐山市 #39;, #39;秦皇岛市 #39;, #39;邯郸市 #39;, #39;邢台市 #39;, #39;保定市 #39;, #39;张家口市 #39;, #39;承德市 #39;, #39;沧州市 #39;, 
 #39;廊坊市 #39;, #39;衡水市 #39;, #39;省直辖县级行政区划 #39;], 
 #39;山西省 #39;: [ #39;太原市 #39;, #39;大同市 #39;, #39;阳泉市 #39;, #39;长治市 #39;, #39;晋城市 #39;, #39;朔州市 #39;, #39;晋中市 #39;,
 #39;运城市 #39;, #39;忻州市 #39;, #39;临汾市 #39;, #39;吕梁市 #39;],
 #39;内蒙古自治区 #39;: [ #39;呼和浩特市 #39;, #39;包头市 #39;, #39;乌海市 #39;, #39;赤峰市 #39;, #39;通辽市 #39;, #39;鄂尔多斯市 #39;, #39;呼伦贝尔市 #39;,
 #39;巴彦淖尔市 #39;, #39;乌兰察布市 #39;, #39;兴安盟 #39;, #39;锡林郭勒盟 #39;, #39;阿拉善盟 #39;], 
 #39;辽宁省 #39;: [ #39;沈阳市 #39;, #39;大连市 #39;, #39;鞍山市 #39;, #39;抚顺市 #39;, #39;本溪市 #39;, #39;丹东市 #39;, #39;锦州市 #39;, #39;营口市 #39;, #39;阜新市 #39;, #39;辽阳市 #39;,
 #39;盘锦市 #39;, #39;铁岭市 #39;, #39;朝阳市 #39;, #39;葫芦岛市 #39;], 
 #39;吉林省 #39;: [ #39;长春市 #39;, #39;吉林市 #39;, #39;四平市 #39;, #39;辽源市 #39;, #39;通化市 #39;, #39;白山市 #39;, #39;松原市 #39;, #39;白城市 #39;, #39;延边朝鲜族自治州 #39;], 
 #39;黑龙江省 #39;: [ #39;哈尔滨市 #39;, #39;齐齐哈尔市 #39;, #39;鸡西市 #39;, #39;鹤岗市 #39;, #39;双鸭山市 #39;, #39;大庆市 #39;, #39;伊春市 #39;, #39;佳木斯市 #39;,
 #39;七台河市 #39;, #39;牡丹江市 #39;, #39;黑河市 #39;, #39;绥化市 #39;, #39;大兴安岭地区 #39;], 
 #39;上海市 #39;: [ #39;市辖区 #39;], 
 #39;江苏省 #39;: [ #39;南京市 #39;, #39;无锡市 #39;, #39;徐州市 #39;, #39;常州市 #39;, #39;苏州市 #39;, #39;南通市 #39;, #39;连云港市 #39;, #39;淮安市 #39;, #39;盐城市 #39;, #39;扬州市 #39;, 
 #39;镇江市 #39;, #39;泰州市 #39;, #39;宿迁市 #39;], 
 #39;浙江省 #39;: [ #39;杭州市 #39;, #39;宁波市 #39;, #39;温州市 #39;, #39;嘉兴市 #39;, #39;湖州市 #39;, #39;绍兴市 #39;, #39;金华市 #39;, #39;衢州市 #39;, #39;舟山市 #39;, #39;台州市 #39;, 
 #39;丽水市 #39;], 
 #39;安徽省 #39;: [ #39;合肥市 #39;, #39;芜湖市 #39;, #39;蚌埠市 #39;, #39;淮南市 #39;, #39;马鞍山市 #39;, #39;淮北市 #39;, #39;铜陵市 #39;, #39;安庆市 #39;, #39;黄山市 #39;,
 #39;滁州市 #39;, #39;阜阳市 #39;, #39;宿州市 #39;, #39;六安市 #39;, #39;亳州市 #39;, #39;池州市 #39;, #39;宣城市 #39;], 
 #39;福建省 #39;: [ #39;福州市 #39;, #39;厦门市 #39;, #39;莆田市 #39;, #39;三明市 #39;, #39;泉州市 #39;, #39;漳州市 #39;, #39;南平市 #39;, #39;龙岩市 #39;, #39;宁德市 #39;], 
 #39;江西省 #39;: [ #39;南昌市 #39;, #39;景德镇市 #39;, #39;萍乡市 #39;, #39;九江市 #39;, #39;新余市 #39;, #39;鹰潭市 #39;, #39;赣州市 #39;, #39;吉安市 #39;, #39;宜春市 #39;, #39;抚州市 #39;,
 #39;上饶市 #39;], 
 #39;山东省 #39;: [ #39;济南市 #39;, #39;青岛市 #39;, #39;淄博市 #39;, #39;枣庄市 #39;, #39;东营市 #39;, #39;烟台市 #39;, #39;潍坊市 #39;, #39;济宁市 #39;,
 #39;泰安市 #39;, #39;威海市 #39;, #39;日照市 #39;, #39;莱芜市 #39;, #39;临沂市 #39;, #39;德州市 #39;, #39;聊城市 #39;, #39;滨州市 #39;, #39;菏泽市 #39;], 
 #39;河南省 #39;: [ #39;郑州市 #39;, #39;开封市 #39;, #39;洛阳市 #39;, #39;平顶山市 #39;, #39;安阳市 #39;, #39;鹤壁市 #39;, #39;新乡市 #39;, #39;焦作市 #39;, #39;濮阳市 #39;,
 #39;许昌市 #39;, #39;漯河市 #39;, #39;三门峡市 #39;, #39;南阳市 #39;, #39;商丘市 #39;, #39;信阳市 #39;, #39;周口市 #39;, #39;驻马店市 #39;, #39;省直辖县级行政区划 #39;], 
 #39;湖北省 #39;: [ #39;武汉市 #39;, #39;黄石市 #39;, #39;十堰市 #39;, #39;宜昌市 #39;, #39;襄阳市 #39;, #39;鄂州市 #39;, #39;荆门市 #39;, #39;孝感市 #39;, #39;荆州市 #39;, #39;黄冈市 #39;,
 #39;咸宁市 #39;, #39;随州市 #39;, #39;恩施土家族苗族自治州 #39;, #39;省直辖县级行政区划 #39;], 
 #39;湖南省 #39;: [ #39;长沙市 #39;, #39;株洲市 #39;, #39;湘潭市 #39;, #39;衡阳市 #39;, #39;邵阳市 #39;, #39;岳阳市 #39;, #39;常德市 #39;, #39;张家界市 #39;, #39;益阳市 #39;, #39;郴州市 #39;,
 #39;永州市 #39;, #39;怀化市 #39;, #39;娄底市 #39;, #39;湘西土家族苗族自治州 #39;], 
 #39;广东省 #39;: [ #39;广州市 #39;, #39;韶关市 #39;, #39;深圳市 #39;, #39;珠海市 #39;, #39;汕头市 #39;, #39;佛山市 #39;, #39;江门市 #39;, #39;湛江市 #39;, #39;茂名市 #39;, #39;肇庆市 #39;,
 #39;惠州市 #39;, #39;梅州市 #39;, #39;汕尾市 #39;, #39;河源市 #39;, #39;阳江市 #39;, #39;清远市 #39;, #39;东莞市 #39;, #39;中山市 #39;, #39;潮州市 #39;, #39;揭阳市 #39;,
 #39;云浮市 #39;], 
 #39;广西壮族自治区 #39;: [ #39;南宁市 #39;, #39;柳州市 #39;, #39;桂林市 #39;, #39;梧州市 #39;, #39;北海市 #39;, #39;防城港市 #39;, #39;钦州市 #39;, #39;贵港市 #39;, #39;玉林市 #39;,
 #39;百色市 #39;, #39;贺州市 #39;, #39;河池市 #39;, #39;来宾市 #39;, #39;崇左市 #39;], 
 #39;海南省 #39;: [ #39;海口市 #39;, #39;三亚市 #39;, #39;三沙市 #39;, #39;儋州市 #39;, #39;省直辖县级行政区划 #39;], 
 #39;重庆市 #39;: [ #39;市辖区 #39;, #39;县 #39;], 
 #39;四川省 #39;: [ #39;成都市 #39;, #39;自贡市 #39;, #39;攀枝花市 #39;, #39;泸州市 #39;, #39;德阳市 #39;, #39;绵阳市 #39;, #39;广元市 #39;, #39;遂宁市 #39;, #39;内江市 #39;, #39;乐山市 #39;,
 #39;南充市 #39;, #39;眉山市 #39;, #39;宜宾市 #39;, #39;广安市 #39;, #39;达州市 #39;, #39;雅安市 #39;, #39;巴中市 #39;, #39;资阳市 #39;, #39;阿坝藏族羌族自治州 #39;, 
 #39;甘孜藏族自治州 #39;, #39;凉山彝族自治州 #39;], 
 #39;贵州省 #39;: [ #39;贵阳市 #39;, #39;六盘水市 #39;, #39;遵义市 #39;, #39;安顺市 #39;, #39;毕节市 #39;, #39;铜仁市 #39;, #39;黔西南布依族苗族自治州 #39;,
 #39;黔东南苗族侗族自治州 #39;, #39;黔南布依族苗族自治州 #39;], 
 #39;云南省 #39;: [ #39;昆明市 #39;, #39;曲靖市 #39;, #39;玉溪市 #39;, #39;保山市 #39;, #39;昭通市 #39;, #39;丽江市 #39;, #39;普洱市 #39;, #39;临沧市 #39;, #39;楚雄彝族自治州 #39;,
 #39;红河哈尼族彝族自治州 #39;, #39;文山壮族苗族自治州 #39;, #39;西双版纳傣族自治州 #39;, #39;大理白族自治州 #39;, 
 #39;德宏傣族景颇族自治州 #39;, #39;怒江傈僳族自治州 #39;, #39;迪庆藏族自治州 #39;], 
 #39;西藏自治区 #39;: [ #39;拉萨市 #39;, #39;日喀则市 #39;, #39;昌都市 #39;, #39;林芝市 #39;, #39;山南市 #39;, #39;那曲地区 #39;, #39;阿里地区 #39;], 
 #39;陕西省 #39;: [ #39;西安市 #39;, #39;铜川市 #39;, #39;宝鸡市 #39;, #39;咸阳市 #39;, #39;渭南市 #39;, #39;延安市 #39;, #39;汉中市 #39;, #39;榆林市 #39;, #39;安康市 #39;, #39;商洛市 #39;],
 #39;甘肃省 #39;: [ #39;兰州市 #39;, #39;嘉峪关市 #39;, #39;金昌市 #39;, #39;白银市 #39;, #39;天水市 #39;, #39;武威市 #39;, #39;张掖市 #39;, #39;平凉市 #39;, #39;酒泉市 #39;, #39;庆阳市 #39;, 
 #39;定西市 #39;, #39;陇南市 #39;, #39;临夏回族自治州 #39;, #39;甘南藏族自治州 #39;], 
 #39;青海省 #39;: [ #39;西宁市 #39;, #39;海东市 #39;, #39;海北藏族自治州 #39;, #39;黄南藏族自治州 #39;, #39;海南藏族自治州 #39;, #39;果洛藏族自治州 #39;,
 #39;玉树藏族自治州 #39;, #39;海西蒙古族藏族自治州 #39;], 
 #39;宁夏回族自治区 #39;: [ #39;银川市 #39;, #39;石嘴山市 #39;, #39;吴忠市 #39;, #39;固原市 #39;, #39;中卫市 #39;], 
 #39;新疆维吾尔自治区 #39;: [ #39;乌鲁木齐市 #39;, #39;克拉玛依市 #39;, #39;吐鲁番市 #39;, #39;哈密市 #39;, #39;昌吉回族自治州 #39;,
 #39;博尔塔拉蒙古自治州 #39;, #39;巴音郭楞蒙古自治州 #39;, #39;阿克苏地区 #39;, #39;克孜勒苏柯尔克孜自治州 #39;,
 #39;喀什地区 #39;, #39;和田地区 #39;, #39;伊犁哈萨克自治州 #39;, #39;塔城地区 #39;, #39;阿勒泰地区 #39;, #39;自治区直辖县级行政区划 #39;], 
 #39;台湾省 #39;: [ #39;台湾 #39;], 
 #39;香港特别行政区 #39;: [ #39;香港 #39;], 
 #39;澳门特别行政区 #39;: [ #39;澳门 #39;]
}module.exports = citys;

用的时候这样用：

 region-widget target= {{select}} bindregionChange= onRegionChange 
 text {{select[0]}}{{select[1]}} /text /region-widget 

Page({
 data: {
 select:[ , ]
 onRegionChange:function(e){
 console.log(e.detail);
 this.setData({select: [e.detail.province, e.detail.city]})
 } ...}

以上就是小程序如何进行地区选择器 实现、调用？的详细内容，更多请关注php中文网其它相关文章！

最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。