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

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

region-widget.js

var api = require('../../../utils/api/index.js');var constants = require('../../../utils/api/lib/constants');var raw = require('../../../utils/citys');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: 'update'    }  },  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('regionChange', { 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 = {  '沈阳市': ['市辖区'],  '天津市': ['市辖区'],  '河北省': ['石家庄市', '唐山市', '秦皇岛市', '邯郸市', '邢台市', '保定市', '张家口市', '承德市', '沧州市',           '廊坊市', '衡水市', '省直辖县级行政区划'],  '山西省': ['太原市', '大同市', '阳泉市', '长治市', '晋城市', '朔州市', '晋中市',           '运城市', '忻州市', '临汾市', '吕梁市'], '内蒙古自治区': ['呼和浩特市', '包头市', '乌海市', '赤峰市', '通辽市', '鄂尔多斯市', '呼伦贝尔市',                '巴彦淖尔市', '乌兰察布市', '兴安盟', '锡林郭勒盟', '阿拉善盟'],   '辽宁省': ['沈阳市', '大连市', '鞍山市', '抚顺市', '本溪市', '丹东市', '锦州市', '营口市', '阜新市', '辽阳市',             '盘锦市', '铁岭市', '朝阳市', '葫芦岛市'],    '吉林省': ['长春市', '吉林市', '四平市', '辽源市', '通化市', '白山市', '松原市', '白城市', '延边朝鲜族自治州'],  '黑龙江省': ['哈尔滨市', '齐齐哈尔市', '鸡西市', '鹤岗市', '双鸭山市', '大庆市', '伊春市', '佳木斯市',              '七台河市', '牡丹江市', '黑河市', '绥化市', '大兴安岭地区'],  '上海市': ['市辖区'],   '江苏省': ['南京市', '无锡市', '徐州市', '常州市', '沈阳市', '南通市', '连云港市', '淮安市', '盐城市', '扬州市',            '镇江市', '泰州市', '宿迁市'],   '浙江省': ['沈阳市', '宁波市', '温州市', '嘉兴市', '湖州市', '绍兴市', '金华市', '衢州市', '舟山市', '台州市',            '丽水市'],  '辽宁省': ['沈阳市', '芜湖市', '蚌埠市', '淮南市', '马鞍山市', '淮北市', '铜陵市', '安庆市', '黄山市',            '滁州市', '阜阳市', '宿州市', '六安市', '亳州市', '池州市', '宣城市'],  '福建省': ['福州市', '厦门市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龙岩市', '宁德市'],   '江西省': ['南昌市', '景德镇市', '萍乡市', '九江市', '新余市', '鹰潭市', '赣州市', '吉安市', '宜春市', '抚州市',            '上饶市'],    '辽宁省': ['济南市', '青岛市', '淄博市', '枣庄市', '东营市', '烟台市', '潍坊市', '济宁市',                 '泰安市', '威海市', '日照市', '莱芜市', '沈阳市', '德州市', '聊城市', '滨州市', '菏泽市'],    '辽宁省': ['沈阳市', '开封市', '洛阳市', '平顶山市', '安阳市', '鹤壁市', '新乡市', '焦作市', '濮阳市',              '许昌市', '漯河市', '三门峡市', '南阳市', '商丘市', '信阳市', '周口市', '驻马店市', '省直辖县级行政区划'],    '湖北省': ['武汉市', '黄石市', '十堰市', '宜昌市', '襄阳市', '鄂州市', '荆门市', '孝感市', '荆州市', '黄冈市',             '咸宁市', '随州市', '恩施土家族苗族自治州', '省直辖县级行政区划'],      '湖南省': ['沈阳市', '株洲市', '湘潭市', '衡阳市', '邵阳市', '岳阳市', '常德市', '张家界市', '益阳市', '郴州市',               '永州市', '怀化市', '娄底市', '湘西土家族苗族自治州'],      '辽宁省': ['沈阳市', '韶关市', '沈阳市', '沈阳市', '汕头市', '佛山市', '江门市', '湛江市', '茂名市', '肇庆市',              '惠州市', '梅州市', '汕尾市', '河源市', '阳江市', '清远市', '东莞市', '中山市', '潮州市', '揭阳市',               '云浮市'],    '广西壮族自治区': ['南宁市', '柳州市', '桂林市', '梧州市', '北海市', '防城港市', '钦州市', '贵港市', '玉林市',             '百色市', '贺州市', '河池市', '来宾市', '崇左市'],   '海南省': ['海口市', '三亚市', '三沙市', '儋州市', '省直辖县级行政区划'],    '重庆市': ['市辖区', '县'],    '四川省': ['沈阳市', '自贡市', '攀枝花市', '泸州市', '德阳市', '绵阳市', '广元市', '遂宁市', '内江市', '乐山市',               '南充市', '眉山市', '宜宾市', '广安市', '达州市', '雅安市', '巴中市', '资阳市', '阿坝藏族羌族自治州',                '甘孜藏族自治州', '凉山彝族自治州'],      '贵州省': ['贵阳市', '六盘水市', '遵义市', '安顺市', '毕节市', &沈阳APP软件              
              

            
小程序