uniapp定位和选择城市
//页面<template><u-index-list :scrollTop="scrollTop" :index-list="indexList"><view v-for="(item, index) in list" :key="index"><u-index-anchor :index="item.letter" /><view clas
·
定位当前位置
uni.getLocation({
type: 'wgs84',
geocode:true,
success: function(res) {
console.log('当前位置：' + res.address.city);
this.city = res.address.city || '郑州'
}
});
uview选择城市不带搜索
//页面
<template>
<u-index-list :scrollTop="scrollTop" :index-list="indexList">
<view v-for="(item, index) in list" :key="index">
<u-index-anchor :index="item.letter" />
<view class="list-cell u-border-bottom" v-for="(item1, index) in item.data" :key="index">
{{item1.name}}
</view>
</view>
</u-index-list>
</template>
<script>
import indexList from "@/common/index.list.js";
const letterArr = indexList.list.map(val => {
return val.letter;
})
export default {
data() {
return {
scrollTop: 0,
indexList: letterArr,
list: indexList.list
}
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
}
}
</script>
<style lang="scss" scoped>
.list-cell {
display: flex;
box-sizing: border-box;
width: 100%;
padding: 10px 24rpx;
overflow: hidden;
color: $u-content-color;
font-size: 14px;
line-height: 24px;
background-color: #fff;
}
</style>
数据
// index.list.js
module.exports = {
list: [{
"letter": "A",
"data": [{
"name": "阿坝藏族羌族自治州",
},
{
"name": "阿克苏市",
},
{
"name": "阿拉尔市",
},
{
"name": "阿拉善盟",
},
{
"name": "阿勒泰市",
},
{
"name": "阿里地区",
},
{
"name": "阿图什市",
},
{
"name": "安康市",
},
{
"name": "安庆市",
},
{
"name": "安顺市",
},
{
"name": "安阳市",
},
{
"name": "鞍山市",
}
]
},
{
"letter": "B",
"data": [{
"name": "巴彦淖尔市",
},
{
"name": "巴中市",
},
{
"name": "白城市",
},
{
"name": "白沙黎族自治县",
},
{
"name": "白山市",
},
{
"name": "白银市",
},
{
"name": "百色市",
},
{
"name": "蚌埠市",
},
{
"name": "包头市",
},
{
"name": "宝鸡市",
},
{
"name": "保定市",
},
{
"name": "保山市",
},
{
"name": "保亭黎族苗族自治县",
},
{
"name": "北海市",
},
{
"name": "北京市",
},
{
"name": "本溪市",
},
{
"name": "毕节地区",
},
{
"name": "滨州市",
},
{
"name": "亳州市",
},
{
"name": "博乐市",
}
]
},
{
"letter": "C",
"data": [{
"name": "长春市",
},
{
"name": "长沙市",
},
{
"name": "长治市",
}, {
"name": "沧州市",
},
{
"name": "昌都地区",
},
{
"name": "昌吉市 ",
},
{
"name": "昌江黎族自治县",
},
{
"name": "常德市",
},
{
"name": "常州市",
},
{
"name": "巢湖市",
},
{
"name": "朝阳市",
},
{
"name": "潮州市",
},
{
"name": "郴州市",
},
{
"name": "成都市",
},
{
"name": "承德市",
},
{
"name": "澄迈县",
},
{
"name": "池州市",
},
{
"name": "赤峰市",
},
{
"name": "崇左市",
},
{
"name": "滁州市",
},
{
"name": "楚雄彝族自治州",
}
]
},
{
"letter": "D",
"data": [{
"name": "达州市",
},
{
"name": "大理白族自治州",
},
{
"name": "大连市",
},
{
"name": "大庆市",
},
{
"name": "大同市",
},
{
"name": "大兴安岭地区",
},
{
"name": "丹东市",
},
{
"name": "儋州市",
}, {
"name": "德宏傣族景颇族自治州",
},
{
"name": "德阳市",
},
{
"name": "德州市",
},
{
"name": "迪庆藏族自治州",
},
{
"name": "定安县",
},
{
"name": "定西市",
},
{
"name": "东方市",
},
{
"name": "东莞市",
},
{
"name": "东营市",
}
]
},
{
"letter": "E",
"data": [{
"name": "鄂尔多斯市",
},
{
"name": "鄂州市",
},
{
"name": "恩施土家族苗族自治州",
}
]
},
{
"letter": "F",
"data": [{
"name": "防城港市",
},
{
"name": "佛山市",
},
{
"name": "福州市",
},
{
"name": "抚顺市",
},
{
"name": "抚州市",
},
{
"name": "阜康市",
},
{
"name": "阜新市",
},
{
"name": "阜阳市",
}
]
},
{
"letter": "G",
"data": [{
"name": "甘南藏族自治州",
},
{
"name": "甘孜藏族自治州",
},
{
"name": "赣州市",
},
{
"name": "固原市",
},
{
"name": "广安市",
},
{
"name": "广元市",
},
{
"name": "广州市",
},
{
"name": "贵港市",
},
{
"name": "贵阳市",
},
{
"name": "桂林市",
},
{
"name": "果洛藏族自治州",
}
]
},
{
"letter": "H",
"data": [{
"name": "哈尔滨市",
},
{
"name": "哈密市",
},
{
"name": "海北藏族自治州",
},
{
"name": "海东地区",
},
{
"name": "海口市",
},
{
"name": "海南藏族自治州",
},
{
"name": "海西蒙古族藏族自治州",
},
{
"name": "邯郸市",
},
{
"name": "汉中市",
},
{
"name": "杭州市",
},
{
"name": "合肥市",
},
{
"name": "和田市",
},
{
"name": "河池市",
},
{
"name": "河源市",
},
{
"name": "菏泽市",
},
{
"name": "贺州市",
},
{
"name": "鹤壁市",
},
{
"name": "鹤岗市",
},
{
"name": "黑河市",
},
{
"name": "衡水市",
},
{
"name": "衡阳市",
},
{
"name": "红河哈尼族彝族自治州",
},
{
"name": "呼和浩特市",
},
{
"name": "呼伦贝尔市",
},
{
"name": "葫芦岛市",
},
{
"name": "湖州市",
},
{
"name": "怀化市",
},
{
"name": "淮安市",
},
{
"name": "淮北市",
},
{
"name": "淮南市",
},
{
"name": "黄冈市",
},
{
"name": "黄南藏族自治州",
},
{
"name": "黄山市",
},
{
"name": "黄石市",
},
{
"name": "惠州市",
}
]
},
{
"letter": "J",
"data": [{
"name": "鸡西市",
},
{
"name": "吉安市",
},
{
"name": "吉林市",
},
{
"name": "济南市",
},
{
"name": "济宁市",
},
{
"name": "济源市",
},
{
"name": "佳木斯市",
},
{
"name": "嘉兴市",
},
{
"name": "嘉峪关市",
},
{
"name": "江门市",
},
{
"name": "焦作市",
},
{
"name": "揭阳市",
},
{
"name": "金昌市",
},
{
"name": "金华市",
},
{
"name": "锦州市",
},
{
"name": "晋城市",
},
{
"name": "晋中市",
},
{
"name": "荆门市",
},
{
"name": "荆州市",
},
{
"name": "景德镇市",
},
{
"name": "九江市",
},
{
"name": "酒泉市",
}
]
},
{
"letter": "K",
"data": [{
"name": "喀什市",
},
{
"name": "开封市",
},
{
"name": "克拉玛依市",
},
{
"name": "库尔勒市",
},
{
"name": "奎屯市",
},
{
"name": "昆明市",
}
]
},
{
"letter": "L",
"data": [{
"name": "拉萨市",
},
{
"name": "来宾市",
},
{
"name": "莱芜市",
},
{
"name": "兰州市",
},
{
"name": "廊坊市",
},
{
"name": "乐东黎族自治县",
},
{
"name": "乐山市",
},
{
"name": "丽江市",
},
{
"name": "丽水市",
},
{
"name": "连云港市",
},
{
"name": "凉山彝族自治州",
},
{
"name": "辽阳市",
},
{
"name": "辽源市",
},
{
"name": "聊城市",
},
{
"name": "林芝地区",
},
{
"name": "临沧市",
},
{
"name": "临汾市",
},
{
"name": "临高县",
},
{
"name": "临夏回族自治州",
},
{
"name": "临沂市",
},
{
"name": "陵水黎族自治县",
},
{
"name": "柳州市",
},
{
"name": "六安市",
},
{
"name": "六盘水市",
},
{
"name": "龙岩市",
},
{
"name": "陇南市",
},
{
"name": "娄底市",
},
{
"name": "泸州市",
},
{
"name": "洛阳市",
},
{
"name": "漯河市",
},
{
"name": "吕梁市",
}
]
},
{
"letter": "M",
"data": [{
"name": "马鞍山市",
},
{
"name": "茂名市",
},
{
"name": "眉山市",
},
{
"name": "梅州市",
},
{
"name": "米泉市",
},
{
"name": "绵阳市",
},
{
"name": "牡丹江市",
}
]
},
{
"letter": "N",
"data": [{
"name": "那曲地区",
},
{
"name": "南昌市",
},
{
"name": "南充市",
},
{
"name": "南京市",
},
{
"name": "南宁市",
},
{
"name": "南平市",
},
{
"name": "南通市",
},
{
"name": "南阳市",
},
{
"name": "内江市",
},
{
"name": "宁波市",
},
{
"name": "宁德市",
},
{
"name": "怒江傈傈族自治州",
}
]
},
{
"letter": "P",
"data": [{
"name": "攀枝花市",
},
{
"name": "盘锦市",
},
{
"name": "平顶山市",
},
{
"name": "平凉市",
},
{
"name": "萍乡市",
},
{
"name": "莆田市",
},
{
"name": "濮阳市",
}
]
},
{
"letter": "Q",
"data": [{
"name": "七台河市",
},
{
"name": "齐齐哈尔市",
},
{
"name": "潜江市",
},
{
"name": "黔东南苗族侗族自治州",
},
{
"name": "黔南布依族苗族自治州",
},
{
"name": "黔西南布依族苗族自治州",
},
{
"name": "钦州市",
},
{
"name": "秦皇岛市",
},
{
"name": "青岛市",
},
{
"name": "清远市",
},
{
"name": "庆阳市",
},
{
"name": "琼海市",
},
{
"name": "琼中黎族苗族自治县",
},
{
"name": "衢州市",
},
{
"name": "曲靖市",
},
{
"name": "泉州市",
}
]
},
{
"letter": "R",
"data": [{
"name": "日喀则地区",
},
{
"name": "日照市",
}
]
},
{
"letter": "S",
"data": [{
"name": "三门峡市",
},
{
"name": "三明市",
},
{
"name": "三亚市",
},
{
"name": "山南地区",
},
{
"name": "汕头市",
},
{
"name": "汕尾市",
},
{
"name": "商洛市",
},
{
"name": "商丘市",
},
{
"name": "上海市",
},
{
"name": "上饶市",
},
{
"name": "韶关市",
},
{
"name": "邵阳市",
},
{
"name": "绍兴市",
},
{
"name": "深圳市",
},
{
"name": "神农架林区",
},
{
"name": "沈阳市",
},
{
"name": "十堰市",
},
{
"name": "石河子市 ",
},
{
"name": "石家庄市",
},
{
"name": "石嘴山市",
},
{
"name": "双鸭山市",
},
{
"name": "朔州市",
},
{
"name": "思茅市",
},
{
"name": "四平市",
},
{
"name": "松原市",
},
{
"name": "苏州市",
},
{
"name": "绥化市",
},
{
"name": "随州市",
},
{
"name": "遂宁市",
},
{
"name": "宿迁市",
},
{
"name": "宿州市",
}
]
},
{
"letter": "T",
"data": [{
"name": "塔城市",
},
{
"name": "台州市",
},
{
"name": "太原市",
},
{
"name": "泰安市",
},
{
"name": "泰州市",
},
{
"name": "唐山市",
},
{
"name": "天津市",
},
{
"name": "天门市",
},
{
"name": "天水市",
},
{
"name": "铁岭市",
},
{
"name": "通化市",
},
{
"name": "通辽市",
},
{
"name": "铜川市",
},
{
"name": "铜陵市",
},
{
"name": "铜仁地区",
},
{
"name": "图木舒克市",
},
{
"name": "吐鲁番市",
},
{
"name": "屯昌县",
}
]
},
{
"letter": "W",
"data": [{
"name": "万宁市",
},
{
"name": "威海市",
},
{
"name": "潍坊市",
},
{
"name": "渭南市",
},
{
"name": "温州市",
},
{
"name": "文昌市",
},
{
"name": "文山壮族苗族自治州",
},
{
"name": "乌海市",
},
{
"name": "乌兰察布市",
},
{
"name": "乌鲁木齐市",
},
{
"name": "乌苏市",
},
{
"name": "无锡市",
},
{
"name": "芜湖市",
},
{
"name": "吴忠市",
},
{
"name": "梧州市",
},
{
"name": "五家渠市",
},
{
"name": "五指山市",
},
{
"name": "武汉市",
},
{
"name": "武威市",
}
]
},
{
"letter": "X",
"data": [{
"name": "西安市",
},
{
"name": "西宁市",
},
{
"name": "西双版纳傣族自治州",
},
{
"name": "锡林郭勒盟",
},
{
"name": "仙桃市",
},
{
"name": "咸宁市",
},
{
"name": "咸阳市",
},
{
"name": "湘潭市",
},
{
"name": "湘西土家族苗族自治州",
},
{
"name": "襄樊市",
},
{
"name": "厦门市",
},
{
"name": "孝感市",
},
{
"name": "忻州市",
},
{
"name": "新乡市",
},
{
"name": "新余市",
},
{
"name": "信阳市",
},
{
"name": "邢台市",
},
{
"name": "兴安盟",
},
{
"name": "徐州市",
},
{
"name": "许昌市",
},
{
"name": "宣城市",
}
]
},
{
"letter": "Y",
"data": [{
"name": "雅安市",
},
{
"name": "烟台市",
},
{
"name": "延安市",
},
{
"name": "延边朝鲜族自治州",
},
{
"name": "盐城市",
},
{
"name": "扬州市",
},
{
"name": "阳江市",
},
{
"name": "阳泉市",
},
{
"name": "伊春市",
},
{
"name": "伊宁市",
},
{
"name": "宜宾市",
},
{
"name": "宜昌市",
},
{
"name": "宜春市",
},
{
"name": "益阳市",
},
{
"name": "银川市",
},
{
"name": "鹰潭市",
},
{
"name": "营口市",
},
{
"name": "永州市",
},
{
"name": "榆林市",
},
{
"name": "玉林市",
},
{
"name": "玉树藏族自治州",
},
{
"name": "玉溪市",
},
{
"name": "岳阳市",
},
{
"name": "云浮市",
},
{
"name": "运城市",
}
]
},
{
"letter": "Z",
"data": [{
"name": "枣庄市",
},
{
"name": "湛江市",
},
{
"name": "张家界市",
},
{
"name": "张家口市",
},
{
"name": "张掖市",
},
{
"name": "漳州市",
},
{
"name": "长春市",
},
{
"name": "长沙市",
},
{
"name": "长治市",
},
{
"name": "昭通市",
},
{
"name": "肇庆市",
},
{
"name": "镇江市",
},
{
"name": "郑州市",
},
{
"name": "中山市",
},
{
"name": "中卫市",
},
{
"name": "重庆市",
},
{
"name": "舟山市",
},
{
"name": "周口市",
},
{
"name": "珠海市",
},
{
"name": "株洲市",
},
{
"name": "驻马店市",
},
{
"name": "资阳市",
},
{
"name": "淄博市",
},
{
"name": "自贡市",
},
{
"name": "遵义市",
}
]
}
]
}
uniapp插件带搜索、定位、热门城市、最近搜索等功能
<template>
<view>
<view class="header w100 flexw" :style="{height:customBar}">
<view class="placeholder" :style="{height:statusBar}"></view>
<view class="flex w100">
<input class="input" :focus="true" @confirm="doneInput" type="text" confirm-type="search" :adjust-position="false" @input="onInput" placeholder="搜索城市 中文/首字母" v-model="searchValue" />
<view class="back_div fsmall bold blue" @tap="back()">
搜索
</view>
</view>
</view>
<scroll-view class="w100" scroll-y="true" :scroll-into-view="scrollIntoId" :style="{height:scrollHeight}" @touchmove.stop.prevent>
<view v-if="disdingwei" id="hot">
<!-- 定位模块 -->
<!-- <view class="dingwei">
<view class="grey flexa fsmall">
当前定位
</view>
<view class="dingwei_city">
<view class="dingwei_city_one" @tap="back_city(position,true)">
{{position?position.city:'定位失败'}}
</view>
<view class="bold blue fmiddle" @click="getWarpweft">
<text>{{po_tips}}</text>
</view>
</view>
</view> -->
<!-- 最近模块 -->
<!-- <view class="dingwei" v-if="cacheLocation">
<view class="grey flexa fsmall">
最近访问
</view>
<view class="dingwei_city dingwei_city_zuijin">
<view class="dingwei_city_one" v-for="(item,index) in cacheLocation" :key="index" @tap="back_city(item)">
{{item.city_name}}
</view>
</view>
</view> -->
<!-- 热门 -->
<!-- <view class="dingwei" v-if="hotCity">
<view class="grey flexa fsmall">
热门城市
</view>
<view class="dingwei_city dingwei_city_zuijin">
<view class="dingwei_city_one" v-for="(item,index) in hotCity" :key="index" @tap="back_city(item)">
{{item.city_name}}
</view>
</view>
</view> -->
</view>
<!-- 城市列表 -->
<view v-if="searchValue == ''" v-for="(item, index) in list" :id="item.idx" :key="item.idx">
<view class="letter-header bold">{{ item.idx }}</view>
<view class="city-div" v-for="(city, i) in item['cities']" :key="i" @tap="back_city(city)">
<text class="city">{{ city.city_name }}</text>
</view>
</view>
<!-- 搜索结果 -->
<view class="city-div" v-for="(item, index) in searchList" :key="index" @tap="back_city(item)">
<text class="city">{{ item.city_name }}</text>
</view>
<view class="placeholder footer"></view>
</scroll-view>
<!-- 右侧字母 -->
<view class="letters" id="list" v-if="searchValue == ''" @touchstart="touchStart" @touchmove.stop.prevent="touchMove" @touchend="touchEnd">
<!-- <view class="fmin" @click="scrollTo('hot')">最近</view> -->
<view class="fmin" v-for="item in letter" :key="item.idx">{{ item.idx }}</view>
</view>
<!-- 选中之后字母 -->
<view class="mask" v-if="touchmove">
<view class="mask-r bold">{{scrollIntoId}}</view>
</view>
</view>
</template>
<script>
import Citys from '../../common/index.list.js';
export default {
data() {
return {
statusBar:'0px',
customBar:'45px',
winHeight: 0,
itemHeight: 0,
winOffsetY: 0,
touchmove:false,
scrollHeight: this.statusBarHeight,
ImgUrl: this.ImgUrl,
letter: [],
searchValue: '',
scrollIntoId: '',
list: [],
tId: null,
searchList: [],
showMask: false,
disdingwei: true,
cacheLocation: '', //最近访问
position: '', //定位获取的位置
po_tips: '重新定位',
hotCity:''
}
},
watch:{
list(){
setTimeout(()=>{
this.setList()
},100)
}
},
onLoad() {
this.scrollHeight = uni.getSystemInfoSync().windowHeight - parseInt(this.customBar) +'px'
//获取存储的最近访问
var that = this
// uni.getStorage({
// key: 'location_key',
// success: function(res) {
// that.cacheLocation = res.data
// }
// });
// //获取定位 经度纬度
// that.getWarpweft()
// let cityLen = Citys.data.city_nav
this.letter = Citys.index;
this.list = Citys.list;
// this.hotCity = Citys.data.hot_city;
},
methods: {
back(){
//你自己实现 返回上一页
},
setList() {
uni.createSelectorQuery()
.in(this)
.select('#list')
.boundingClientRect()
.exec(ret => {
this.winOffsetY = ret[0].top
this.winHeight = ret[0].height
this.itemHeight = this.winHeight / this.list.length
})
},
touchStart(e) {
this.touchmove = true
let pageY = e.touches[0].pageY
let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
if (this.list[index]) {
this.scrollIntoId = this.list[index].idx
}
},
touchMove(e) {
let pageY = e.touches[0].pageY
let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
if (this.list[index] && this.list[index].idx === this.scrollIntoId) {
return false
}
if (this.list[index]) {
this.scrollIntoId = this.list[index].idx
}
},
touchEnd() {
this.touchmove = false
this.touchmoveIndex = -1
},
doneInput(){
uni.hideKeyboard()
},
move(e){
console.log(111,e);
},
getId(index) {
return this.letter[index];
},
query(source, text) {
let res = [];
var self = this;
let len = source.length
var text = text.toLowerCase()
for (let i = 0; i < len; i++) {
//单字母搜索
if(text.length == 1 && /^[a-zA-Z]$/.test(text)){
let arr = []
let idx = text.toUpperCase()
if(idx == source[i].idx){
console.log(222,source[i]);
return source[i].cities
}
}
//其它搜索
if(source[i].cities){
let _len = source[i].cities.length
for (var n = 0; n < _len; n++) {
let _item = source[i].cities[n]
if(new RegExp('^' + text).test(_item.city_name)){
res.push(_item);
continue;
}
if(new RegExp('^' + text).test(_item.city_pinyin)){
res.push(_item);
continue;
}
if(new RegExp('^' + text).test(_item.py)){
res.push(_item);
continue;
}
}
}
}
return res;
},
isString(obj) {
return typeof obj === 'string';
},
onInput(e) {
const value = e.target.value;
if (value !== '' && this.list) {
const queryData = this.query(this.list, String(value).trim());
this.searchList = queryData;
this.disdingwei = false
} else {
this.searchList = [];
this.disdingwei = true
}
},
back_city(item,hasLocation = false) {
console.log(333,item);
this.$store.commit('getCity',item.city_name)
uni.switchTab({
url:'/pages/home/index'
})
if (item) {
//是否是定位
if(hasLocation){
item = {city_name:item.city,location:item}
}
uni.$emit('selectCity', item);
//unshift 把数据插入到首位，与push相反
if(!this.cacheLocation)this.cacheLocation = []
this.cacheLocation.unshift(item)
this.searchValue = "";
this.disdingwei = true
var arr = this.cacheLocation
//数组去重
function distinct(arr) {
let newArr = []
for (let i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) < 0) {
newArr.push(arr[i])
}
}
return newArr
}
this.cacheLocation = distinct(arr).slice(0,5)
uni.setStorage({
key: 'location_key',
data: this.cacheLocation
});
}
this.back()
},
getWarpweft() {
//自己写吧
var that = this
that.po_tips = '定位中...'
setTimeout(()=>{
that.po_tips = '定位失败'
})
}
}
};
</script>
<style scoped>
.fsmall{
font-size: 26rpx;
}
.fmiddle{
font-size: 28rpx;
}
.blue{
color: #007AFF;
}
.bold{
font-weight: 600;
}
.flex{
display: flex;
justify-content: center;
align-items: center;
}
.mask {
position: fixed;
z-index: 3;
top: 40%;
left: 40%;
}
.mask-r {
height: 120rpx;
width: 120rpx;
border-radius: 60rpx;
display: flex;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
justify-content: center;
align-items: center;
font-size: 40rpx;
color: #FFFFFF
}
.content {
height: 100%;
width: 100%;
background-color: #ffffff;
}
.header {
width: 100%;
position: relative;
z-index: 8;
background-color: #FFFFFF;
}
.back_div {
width: 100rpx;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.back_img {
width: 35rpx;
height: 35rpx;
}
.input {
font-size: 26rpx;
width: 600rpx;
height: 60rpx;
max-height: 60rpx;
border-radius: 10rpx;
background-color: #F5F5F5;
padding-left: 20rpx;
padding-right: 20rpx;
box-sizing: border-box;
}
.title {
font-size: 30rpx;
color: white;
}
.show {
left: 0;
width: 100%;
transition: left 0.3s ease;
}
.hide {
left: 100%;
width: 100%;
transition: left 0.3s ease;
}
.title {
font-size: 30rpx;
color: white;
}
.letters {
position: absolute;
right: 0;
width: 80rpx;
color: #333333;
top: 25%;
text-align: center;
font-size: 24rpx;
font-weight: 510;
}
.letters .fmin{
}
.letter-header {
font-size: 28rpx;
padding-left: 40rpx;
box-sizing: border-box;
display: flex;
align-items: center;
}
.city-div {
width: 660rpx;
margin: auto;
padding: 20rpx 0;
border-bottom-width: 0.5rpx;
border-bottom-color: #ebedef;
border-bottom-style: solid;
display: flex;
align-items: center;
}
.city {
font-size: 28rpx;
color: #000000;
padding-left: 30rpx;
}
.dingwei {
width: 90%;
margin: auto;
padding-top: 25rpx;
box-sizing: border-box;
margin-bottom: 26rpx;
}
.dingwei .grey{
margin-bottom: 25rpx;
}
.dingwei_city {
width: 100%;
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
.dingwei_city_one {
height: 60rpx;
background-color: #F5F5F5;
border-radius: 30rpx;
font-size: 26rpx;
padding: 0 20rpx;
display: flex;
justify-content: center;
align-items: center;
margin: 0 20rpx 20rpx 0;
}
.dingweis {
width: 32rpx;
height: 32rpx;
}
.dingwei_city_zuijin {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
</style>
数据
module.exports = {
list: [{
"idx": "A",
"cities": [{
"city_name": "阿坝藏族羌族自治州",
},
{
"city_name": "阿克苏市",
},
{
"city_name": "阿拉尔市",
},
{
"city_name": "阿拉善盟",
},
{
"city_name": "阿勒泰市",
},
{
"city_name": "阿里地区",
},
{
"city_name": "阿图什市",
},
{
"city_name": "安康市",
},
{
"city_name": "安庆市",
},
{
"city_name": "安顺市",
},
{
"city_name": "安阳市",
},
{
"city_name": "鞍山市",
}
]
},
{
"idx": "B",
"cities": [{
"city_name": "巴彦淖尔市",
},
{
"city_name": "巴中市",
},
{
"city_name": "白城市",
},
{
"city_name": "白沙黎族自治县",
},
{
"city_name": "白山市",
},
{
"city_name": "白银市",
},
{
"city_name": "百色市",
},
{
"city_name": "蚌埠市",
},
{
"city_name": "包头市",
},
{
"city_name": "宝鸡市",
},
{
"city_name": "保定市",
},
{
"city_name": "保山市",
},
{
"city_name": "保亭黎族苗族自治县",
},
{
"city_name": "北海市",
},
{
"city_name": "北京市",
},
{
"city_name": "本溪市",
},
{
"city_name": "毕节地区",
},
{
"city_name": "滨州市",
},
{
"city_name": "亳州市",
},
{
"city_name": "博乐市",
}
]
},
{
"idx": "C",
"cities": [{
"city_name": "长春市",
},
{
"city_name": "长沙市",
},
{
"city_name": "长治市",
}, {
"city_name": "沧州市",
},
{
"city_name": "昌都地区",
},
{
"city_name": "昌吉市 ",
},
{
"city_name": "昌江黎族自治县",
},
{
"city_name": "常德市",
},
{
"city_name": "常州市",
},
{
"city_name": "巢湖市",
},
{
"city_name": "朝阳市",
},
{
"city_name": "潮州市",
},
{
"city_name": "郴州市",
},
{
"city_name": "成都市",
},
{
"city_name": "承德市",
},
{
"city_name": "澄迈县",
},
{
"city_name": "池州市",
},
{
"city_name": "赤峰市",
},
{
"city_name": "崇左市",
},
{
"city_name": "滁州市",
},
{
"city_name": "楚雄彝族自治州",
}
]
},
{
"idx": "D",
"cities": [{
"city_name": "达州市",
},
{
"city_name": "大理白族自治州",
},
{
"city_name": "大连市",
},
{
"city_name": "大庆市",
},
{
"city_name": "大同市",
},
{
"city_name": "大兴安岭地区",
},
{
"city_name": "丹东市",
},
{
"city_name": "儋州市",
}, {
"city_name": "德宏傣族景颇族自治州",
},
{
"city_name": "德阳市",
},
{
"city_name": "德州市",
},
{
"city_name": "迪庆藏族自治州",
},
{
"city_name": "定安县",
},
{
"city_name": "定西市",
},
{
"city_name": "东方市",
},
{
"city_name": "东莞市",
},
{
"city_name": "东营市",
}
]
},
{
"idx": "E",
"cities": [{
"city_name": "鄂尔多斯市",
},
{
"city_name": "鄂州市",
},
{
"city_name": "恩施土家族苗族自治州",
}
]
},
{
"idx": "F",
"cities": [{
"city_name": "防城港市",
},
{
"city_name": "佛山市",
},
{
"city_name": "福州市",
},
{
"city_name": "抚顺市",
},
{
"city_name": "抚州市",
},
{
"city_name": "阜康市",
},
{
"city_name": "阜新市",
},
{
"city_name": "阜阳市",
}
]
},
{
"idx": "G",
"cities": [{
"city_name": "甘南藏族自治州",
},
{
"city_name": "甘孜藏族自治州",
},
{
"city_name": "赣州市",
},
{
"city_name": "固原市",
},
{
"city_name": "广安市",
},
{
"city_name": "广元市",
},
{
"city_name": "广州市",
},
{
"city_name": "贵港市",
},
{
"city_name": "贵阳市",
},
{
"city_name": "桂林市",
},
{
"city_name": "果洛藏族自治州",
}
]
},
{
"idx": "H",
"cities": [{
"city_name": "哈尔滨市",
},
{
"city_name": "哈密市",
},
{
"city_name": "海北藏族自治州",
},
{
"city_name": "海东地区",
},
{
"city_name": "海口市",
},
{
"city_name": "海南藏族自治州",
},
{
"city_name": "海西蒙古族藏族自治州",
},
{
"city_name": "邯郸市",
},
{
"city_name": "汉中市",
},
{
"city_name": "杭州市",
},
{
"city_name": "合肥市",
},
{
"city_name": "和田市",
},
{
"city_name": "河池市",
},
{
"city_name": "河源市",
},
{
"city_name": "菏泽市",
},
{
"city_name": "贺州市",
},
{
"city_name": "鹤壁市",
},
{
"city_name": "鹤岗市",
},
{
"city_name": "黑河市",
},
{
"city_name": "衡水市",
},
{
"city_name": "衡阳市",
},
{
"city_name": "红河哈尼族彝族自治州",
},
{
"city_name": "呼和浩特市",
},
{
"city_name": "呼伦贝尔市",
},
{
"city_name": "葫芦岛市",
},
{
"city_name": "湖州市",
},
{
"city_name": "怀化市",
},
{
"city_name": "淮安市",
},
{
"city_name": "淮北市",
},
{
"city_name": "淮南市",
},
{
"city_name": "黄冈市",
},
{
"city_name": "黄南藏族自治州",
},
{
"city_name": "黄山市",
},
{
"city_name": "黄石市",
},
{
"city_name": "惠州市",
}
]
},
{
"idx": "J",
"cities": [{
"city_name": "鸡西市",
},
{
"city_name": "吉安市",
},
{
"city_name": "吉林市",
},
{
"city_name": "济南市",
},
{
"city_name": "济宁市",
},
{
"city_name": "济源市",
},
{
"city_name": "佳木斯市",
},
{
"city_name": "嘉兴市",
},
{
"city_name": "嘉峪关市",
},
{
"city_name": "江门市",
},
{
"city_name": "焦作市",
},
{
"city_name": "揭阳市",
},
{
"city_name": "金昌市",
},
{
"city_name": "金华市",
},
{
"city_name": "锦州市",
},
{
"city_name": "晋城市",
},
{
"city_name": "晋中市",
},
{
"city_name": "荆门市",
},
{
"city_name": "荆州市",
},
{
"city_name": "景德镇市",
},
{
"city_name": "九江市",
},
{
"city_name": "酒泉市",
}
]
},
{
"idx": "K",
"cities": [{
"city_name": "喀什市",
},
{
"city_name": "开封市",
},
{
"city_name": "克拉玛依市",
},
{
"city_name": "库尔勒市",
},
{
"city_name": "奎屯市",
},
{
"city_name": "昆明市",
}
]
},
{
"idx": "L",
"cities": [{
"city_name": "拉萨市",
},
{
"city_name": "来宾市",
},
{
"city_name": "莱芜市",
},
{
"city_name": "兰州市",
},
{
"city_name": "廊坊市",
},
{
"city_name": "乐东黎族自治县",
},
{
"city_name": "乐山市",
},
{
"city_name": "丽江市",
},
{
"city_name": "丽水市",
},
{
"city_name": "连云港市",
},
{
"city_name": "凉山彝族自治州",
},
{
"city_name": "辽阳市",
},
{
"city_name": "辽源市",
},
{
"city_name": "聊城市",
},
{
"city_name": "林芝地区",
},
{
"city_name": "临沧市",
},
{
"city_name": "临汾市",
},
{
"city_name": "临高县",
},
{
"city_name": "临夏回族自治州",
},
{
"city_name": "临沂市",
},
{
"city_name": "陵水黎族自治县",
},
{
"city_name": "柳州市",
},
{
"city_name": "六安市",
},
{
"city_name": "六盘水市",
},
{
"city_name": "龙岩市",
},
{
"city_name": "陇南市",
},
{
"city_name": "娄底市",
},
{
"city_name": "泸州市",
},
{
"city_name": "洛阳市",
},
{
"city_name": "漯河市",
},
{
"city_name": "吕梁市",
}
]
},
{
"idx": "M",
"cities": [{
"city_name": "马鞍山市",
},
{
"city_name": "茂名市",
},
{
"city_name": "眉山市",
},
{
"city_name": "梅州市",
},
{
"city_name": "米泉市",
},
{
"city_name": "绵阳市",
},
{
"city_name": "牡丹江市",
}
]
},
{
"idx": "N",
"cities": [{
"city_name": "那曲地区",
},
{
"city_name": "南昌市",
},
{
"city_name": "南充市",
},
{
"city_name": "南京市",
},
{
"city_name": "南宁市",
},
{
"city_name": "南平市",
},
{
"city_name": "南通市",
},
{
"city_name": "南阳市",
},
{
"city_name": "内江市",
},
{
"city_name": "宁波市",
},
{
"city_name": "宁德市",
},
{
"city_name": "怒江傈傈族自治州",
}
]
},
{
"idx": "P",
"cities": [{
"city_name": "攀枝花市",
},
{
"city_name": "盘锦市",
},
{
"city_name": "平顶山市",
},
{
"city_name": "平凉市",
},
{
"city_name": "萍乡市",
},
{
"city_name": "莆田市",
},
{
"city_name": "濮阳市",
}
]
},
{
"idx": "Q",
"cities": [{
"city_name": "七台河市",
},
{
"city_name": "齐齐哈尔市",
},
{
"city_name": "潜江市",
},
{
"city_name": "黔东南苗族侗族自治州",
},
{
"city_name": "黔南布依族苗族自治州",
},
{
"city_name": "黔西南布依族苗族自治州",
},
{
"city_name": "钦州市",
},
{
"city_name": "秦皇岛市",
},
{
"city_name": "青岛市",
},
{
"city_name": "清远市",
},
{
"city_name": "庆阳市",
},
{
"city_name": "琼海市",
},
{
"city_name": "琼中黎族苗族自治县",
},
{
"city_name": "衢州市",
},
{
"city_name": "曲靖市",
},
{
"city_name": "泉州市",
}
]
},
{
"idx": "R",
"cities": [{
"city_name": "日喀则地区",
},
{
"city_name": "日照市",
}
]
},
{
"idx": "S",
"cities": [{
"city_name": "三门峡市",
},
{
"city_name": "三明市",
},
{
"city_name": "三亚市",
},
{
"city_name": "山南地区",
},
{
"city_name": "汕头市",
},
{
"city_name": "汕尾市",
},
{
"city_name": "商洛市",
},
{
"city_name": "商丘市",
},
{
"city_name": "上海市",
},
{
"city_name": "上饶市",
},
{
"city_name": "韶关市",
},
{
"city_name": "邵阳市",
},
{
"city_name": "绍兴市",
},
{
"city_name": "深圳市",
},
{
"city_name": "神农架林区",
},
{
"city_name": "沈阳市",
},
{
"city_name": "十堰市",
},
{
"city_name": "石河子市 ",
},
{
"city_name": "石家庄市",
},
{
"city_name": "石嘴山市",
},
{
"city_name": "双鸭山市",
},
{
"city_name": "朔州市",
},
{
"city_name": "思茅市",
},
{
"city_name": "四平市",
},
{
"city_name": "松原市",
},
{
"city_name": "苏州市",
},
{
"city_name": "绥化市",
},
{
"city_name": "随州市",
},
{
"city_name": "遂宁市",
},
{
"city_name": "宿迁市",
},
{
"city_name": "宿州市",
}
]
},
{
"idx": "T",
"cities": [{
"city_name": "塔城市",
},
{
"city_name": "台州市",
},
{
"city_name": "太原市",
},
{
"city_name": "泰安市",
},
{
"city_name": "泰州市",
},
{
"city_name": "唐山市",
},
{
"city_name": "天津市",
},
{
"city_name": "天门市",
},
{
"city_name": "天水市",
},
{
"city_name": "铁岭市",
},
{
"city_name": "通化市",
},
{
"city_name": "通辽市",
},
{
"city_name": "铜川市",
},
{
"city_name": "铜陵市",
},
{
"city_name": "铜仁地区",
},
{
"city_name": "图木舒克市",
},
{
"city_name": "吐鲁番市",
},
{
"city_name": "屯昌县",
}
]
},
{
"idx": "W",
"cities": [{
"city_name": "万宁市",
},
{
"city_name": "威海市",
},
{
"city_name": "潍坊市",
},
{
"city_name": "渭南市",
},
{
"city_name": "温州市",
},
{
"city_name": "文昌市",
},
{
"city_name": "文山壮族苗族自治州",
},
{
"city_name": "乌海市",
},
{
"city_name": "乌兰察布市",
},
{
"city_name": "乌鲁木齐市",
},
{
"city_name": "乌苏市",
},
{
"city_name": "无锡市",
},
{
"city_name": "芜湖市",
},
{
"city_name": "吴忠市",
},
{
"city_name": "梧州市",
},
{
"city_name": "五家渠市",
},
{
"city_name": "五指山市",
},
{
"city_name": "武汉市",
},
{
"city_name": "武威市",
}
]
},
{
"idx": "X",
"cities": [{
"city_name": "西安市",
},
{
"city_name": "西宁市",
},
{
"city_name": "西双版纳傣族自治州",
},
{
"city_name": "锡林郭勒盟",
},
{
"city_name": "仙桃市",
},
{
"city_name": "咸宁市",
},
{
"city_name": "咸阳市",
},
{
"city_name": "湘潭市",
},
{
"city_name": "湘西土家族苗族自治州",
},
{
"city_name": "襄樊市",
},
{
"city_name": "厦门市",
},
{
"city_name": "孝感市",
},
{
"city_name": "忻州市",
},
{
"city_name": "新乡市",
},
{
"city_name": "新余市",
},
{
"city_name": "信阳市",
},
{
"city_name": "邢台市",
},
{
"city_name": "兴安盟",
},
{
"city_name": "徐州市",
},
{
"city_name": "许昌市",
},
{
"city_name": "宣城市",
}
]
},
{
"idx": "Y",
"cities": [{
"city_name": "雅安市",
},
{
"city_name": "烟台市",
},
{
"city_name": "延安市",
},
{
"city_name": "延边朝鲜族自治州",
},
{
"city_name": "盐城市",
},
{
"city_name": "扬州市",
},
{
"city_name": "阳江市",
},
{
"city_name": "阳泉市",
},
{
"city_name": "伊春市",
},
{
"city_name": "伊宁市",
},
{
"city_name": "宜宾市",
},
{
"city_name": "宜昌市",
},
{
"city_name": "宜春市",
},
{
"city_name": "益阳市",
},
{
"city_name": "银川市",
},
{
"city_name": "鹰潭市",
},
{
"city_name": "营口市",
},
{
"city_name": "永州市",
},
{
"city_name": "榆林市",
},
{
"city_name": "玉林市",
},
{
"city_name": "玉树藏族自治州",
},
{
"city_name": "玉溪市",
},
{
"city_name": "岳阳市",
},
{
"city_name": "云浮市",
},
{
"city_name": "运城市",
}
]
},
{
"idx": "Z",
"cities": [{
"city_name": "枣庄市",
},
{
"city_name": "湛江市",
},
{
"city_name": "张家界市",
},
{
"city_name": "张家口市",
},
{
"city_name": "张掖市",
},
{
"city_name": "漳州市",
},
{
"city_name": "长春市",
},
{
"city_name": "长沙市",
},
{
"city_name": "长治市",
},
{
"city_name": "昭通市",
},
{
"city_name": "肇庆市",
},
{
"city_name": "镇江市",
},
{
"city_name": "郑州市",
},
{
"city_name": "中山市",
},
{
"city_name": "中卫市",
},
{
"city_name": "重庆市",
},
{
"city_name": "舟山市",
},
{
"city_name": "周口市",
},
{
"city_name": "珠海市",
},
{
"city_name": "株洲市",
},
{
"city_name": "驻马店市",
},
{
"city_name": "资阳市",
},
{
"city_name": "淄博市",
},
{
"city_name": "自贡市",
},
{
"city_name": "遵义市",
}
]
}
],
index: [{
"idx": "A"
},
{
"idx": "B"
},
{
"idx": "C"
},
{
"idx": "D"
},
{
"idx": "E"
},
{
"idx": "F"
},
{
"idx": "G"
},
{
"idx": "H"
},
{
"idx": "J"
},
{
"idx": "K"
},
{
"idx": "L"
},
{
"idx": "M"
},
{
"idx": "N"
},
{
"idx": "P"
},
{
"idx": "Q"
},
{
"idx": "R"
},
{
"idx": "S"
},
{
"idx": "T"
},
{
"idx": "W"
},
{
"idx": "X"
},
{
"idx": "Y"
},
{
"idx": "Z"
}
]
}
开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！
更多推荐
14
0- 0
已为社区贡献1条内容
所有评论(0)