温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

小程序怎么调用地区选择器

发布时间:2020-12-21 11:41:05 阅读:186 作者:小新 栏目:移动开发
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章给大家分享的是有关小程序怎么调用地区选择器的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

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

感谢各位的阅读!关于小程序怎么调用地区选择器就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×