小程序如何进行地区选择器实现、调用？-小程序开发-PHP中文网

首页

微信小程序

小程序开发

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

坏嘻嘻

Sep 15, 2018 am 10:47 AM

小程序

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

region-widget.js

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中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

使用Python开发微信小程序Jun 17, 2023 pm 06:34 PM

随着移动互联网技术和智能手机的普及，微信成为了人们生活中不可或缺的一个应用。而微信小程序则让人们可以在不需要下载安装应用的情况下，直接使用小程序来解决一些简单的需求。本文将介绍如何使用Python来开发微信小程序。一、准备工作在使用Python开发微信小程序之前，需要安装相关的Python库。这里推荐使用wxpy和itchat这两个库。wxpy是一个微信机器

小程序能用react吗Dec 29, 2022 am 11:06 AM

小程序能用react，其使用方法：1、基于“react-reconciler”实现一个渲染器，生成一个DSL；2、创建一个小程序组件，去解析和渲染DSL；3、安装npm，并执行开发者工具中的构建npm；4、在自己的页面中引入包，再利用api即可完成开发。

Java语言中的微信小程序开发介绍Jun 09, 2023 pm 10:40 PM

微信小程序是一种轻量级的应用程序，可以在微信平台上运行，不需要下载安装，方便快捷。Java语言作为一种广泛应用于企业级应用开发的语言，也可以用于微信小程序的开发。在Java语言中，可以使用SpringBoot框架和第三方工具包来开发微信小程序。下面是一个简单的微信小程序开发过程。创建微信小程序首先，需要在微信公众平台上注册一个小程序。注册成功后，可以获取到

用Python编写简单的聊天程序教程May 08, 2023 pm 06:37 PM

实现思路x01服务端的建立首先,在服务端,使用socket进行消息的接受,每接受一个socket的请求,就开启一个新的线程来管理消息的分发与接受,同时,又存在一个handler来管理所有的线程,从而实现对聊天室的各种功能的处理x02客户端的建立客户端的建立就要比服务端简单多了,客户端的作用只是对消息的发送以及接受,以及按照特定的规则去输入特定的字符从而实现不同的功能的使用,因此,在客户端这里,只需要去使用两个线程,一个是专门用于接受消息,一个是专门用于发送消息的至于为什么不用一个呢,那是因为,只

PHP与小程序的地理位置定位与地图显示Jul 04, 2023 pm 04:01 PM

PHP与小程序的地理位置定位与地图显示地理位置定位与地图显示在现代科技中已经成为了必备的功能之一。随着移动设备的普及，人们对于定位和地图显示的需求也越来越高。在开发过程中，PHP和小程序是常见的两种技术选择。本文将为大家介绍PHP与小程序中的地理位置定位与地图显示的实现方法，并附上相应的代码示例。一、PHP中的地理位置定位在PHP中，我们可以使用第三方地理位

教你如何在小程序中用公众号模板消息（附详细思路）Nov 04, 2022 pm 04:53 PM

本篇文章给大家带来了关于微信小程序的相关问题，其中主要介绍了如何在小程序中用公众号模板消息，下面一起来看一下，希望对大家有帮助。

小程序中文件上传的PHP实现方法Jun 02, 2023 am 08:40 AM

随着小程序的广泛应用，越来越多的开发者需要将其与后台服务器进行数据交互，其中最常见的业务场景之一就是上传文件。本文将介绍在小程序中实现文件上传的PHP后台实现方法。一、小程序中的文件上传在小程序中实现文件上传，主要依赖于小程序APIwx.uploadFile()。该API接受一个options对象作为参数，其中包含了要上传的文件路径、需要传递的其他数据以及

苏州健康码的小程序叫什么Oct 24, 2022 am 09:47 AM

苏州健康码的小程序叫“苏康码”，它是苏州市疫情防控指挥部指定的通行服务码，疫情防控期间在全市范围内通用，可以作为广大民众日常出行的重要凭证，同时作为防疫人员查验的主要依据；也是省内所有来苏逗苏人员以及在苏工作学习生活,旅游或临时停留人员申报的键康申报数据为基础，结合相关数据比对后动态生成的个人电子健康凭证。

See all articles