基本uniapp的，选择城市、通讯录插件

#城市选择插件说明

components ---组件目录 pages --- 页面目录（DEMO）

import citySelect from "@/components/city-select/city-select.vue" export default { components: {citySelect} } 提示

示例中使用的城市数据不是最新的，国家在发展，每年都有增改的城市，需要最新的数据，请移步中华人民共和国民政部

formatName --- 需要构建索引参数的名称（注意：传递的对象里面必须要有这个名称的参数） activeCity --- 当前城市 hotCity --- 热门城市 obtainCitys --- 需要排序的城市数据 isSearch --- 是否有搜索功能 cityClick --- 点击城市回调方法

formatName: 'title', //当前城市 activeCity: { id: 1, title: '南京市' }, //热门城市 hotCity: [ { id: 0, title: '南京市' }, { id: 1, title: '南京市' } ], //显示的城市数据 obtainCitys: [ { id: 0, title: '南京' }, { id: 1, title: '北京' }, { id: 2, title: '天津' }, { id: 3, title: '东京' } ] 示例数据

[ { id: 0, title: '南京' }, { id: 1, title: '北京' }, { id: 2, title: '天津' }, { id: 3, title: '东京' } ] 完整 Demo

<template> <view> <city-select @cityClick="cityClick" :formatName="formatName" :activeCity="activeCity" :hotCity="hotCity" :obtainCitys="obtainCitys" :isSearch="true" ref="citys" ></city-select> </view> </template> <script> import citys from './citys.js' console.log(citys.length) import citySelect from '@/components/city-select/city-select.vue' export default { data() { return { //需要构建索引参数的名称（注意：传递的对象里面必须要有这个名称的参数） formatName: 'title', //当前城市 activeCity: { id: 1, title: '南京市' }, //热门城市 hotCity: [ { id: 0, title: '南京市' }, { id: 1, title: '南京市' } ], //显示的城市数据 obtainCitys: [ { id: 0, title: '南京' }, { id: 1, title: '北京' }, { id: 2, title: '天津' }, { id: 3, title: '东京' } ] } }, components: { citySelect }, onLoad() { //动态更新数据 setTimeout(() => { //修改需要构建索引参数的名称 this.formatName = 'cityName' //修改当前城市 this.activeCity = { cityName: '南京', cityCode: 110100 } //修改热门城市 this.hotCity = [ { cityName: '南京', cityCode: 110100 }, { cityName: '北京', cityCode: 110102 } ] //修改构建索引数据 this.obtainCitys = citys uni.showToast({ icon: 'none', title: '更新数据成功', // #ifdef MP-WEIXIN duration: 3000, // #endif mask: true }) }, 5000) }, methods: { cityClick(item) { uni.showToast({ icon: 'none', title: 'item: ' + JSON.stringify(item), // #ifdef MP-WEIXIN duration: 3000, // #endif mask: true }) } } } </script> <style></style> 运行方式

###将文件解压拖入 HBuilderX ,引入 App.vue、main.js、manifest.json、pages.json 文件，配置好页面路径，运行即可

"pages": [ { "path" : "pages/index/index", "style" : { "navigationBarTitleText": "index" } } ],