uniapp选择城市功能
uniapp选择城市功能
·
效果图
2.热门城市数据hotData.js
export default [{
name: "上海市",
}, {
name: "广州市",
},
{
name: "北京市",
}, {
name: "天津市",
}, {
name: "重庆市",
},
{
name: "深圳市",
}, {
name: "佛山市",
}, {
name: "东莞市",
},
{
name: "杭州市",
}, {
name: "宁波市",
}, {
name: "南京市",
},
{
name: "苏州市",
}, {
name: "福州市",
}, {
name: "厦门市",
},
{
name: "泉州市",
}, {
name: "济南市",
}, {
name: "青岛市",
},
{
name: "武汉市",
}, {
name: "成都市",
}, {
name: "郑州市",
},
{
name: "长沙市",
}, {
name: "其他城市",
},
]
3.城市数据cityData.js
export default {
"a": ["北京市", "天津市", "河北省", "山西省", "内蒙古自治区", "辽宁省", "吉林省", "黑龙江省", "上海市", "江苏省", "浙江省", "安徽省", "福建省", "江西省", "山东省",
"河南省", "湖北省", "湖南省", "广东省", "广西壮族自治区", "海南省", "重庆市", "四川省", "贵州省", "云南省", "西藏自治区", "陕西省", "甘肃省", "青海省",
"宁夏回族自治区", "新疆维吾尔自治区", "台湾省", "香港特别行政区", "澳门特别行政区"
],
"o": {
"0": ["北京市"],
"1": ["天津市"],
"2": ["石家庄市", "唐山市", "秦皇岛市", "邯郸市", "邢台市", "保定市", "张家口市", "承德市", "沧州市", "廊坊市", "衡水市", "省直辖县级行政区划"],
"3": ["太原市", "大同市", "阳泉市", "长治市", "晋城市", "朔州市", "晋中市", "运城市", "忻州市", "临汾市", "吕梁市"],
"4": ["呼和浩特市", "包头市", "乌海市", "赤峰市", "通辽市", "鄂尔多斯市", "呼伦贝尔市", "巴彦淖尔市", "乌兰察布市", "兴安盟", "锡林郭勒盟", "阿拉善盟"],
"5": ["沈阳市", "大连市", "鞍山市", "抚顺市", "本溪市", "丹东市", "锦州市", "营口市", "阜新市", "辽阳市", "盘锦市", "铁岭市", "朝阳市", "葫芦岛市"],
"6": ["长春市", "吉林市", "四平市", "辽源市", "通化市", "白山市", "松原市", "白城市", "延边朝鲜族自治州"],
"7": ["哈尔滨市", "齐齐哈尔市", "鸡西市", "鹤岗市", "双鸭山市", "大庆市", "伊春市", "佳木斯市", "七台河市", "牡丹江市", "黑河市", "绥化市", "大兴安岭地区"],
"8": ["上海市"],
"9": ["南京市", "无锡市", "徐州市", "常州市", "苏州市", "南通市", "连云港市", "淮安市", "盐城市", "扬州市", "镇江市", "泰州市", "宿迁市"],
"10": ["杭州市", "宁波市", "温州市", "嘉兴市", "湖州市", "绍兴市", "金华市", "衢州市", "舟山市", "台州市", "丽水市"],
"11": ["合肥市", "芜湖市", "蚌埠市", "淮南市", "马鞍山市", "淮北市", "铜陵市", "安庆市", "黄山市", "滁州市", "阜阳市", "宿州市", "六安市", "亳州市", "池州市",
"宣城市"
],
"12": ["福州市", "厦门市", "莆田市", "三明市", "泉州市", "漳州市", "南平市", "龙岩市", "宁德市"],
"13": ["南昌市", "景德镇市", "萍乡市", "九江市", "新余市", "鹰潭市", "赣州市", "吉安市", "宜春市", "抚州市", "上饶市"],
"14": ["济南市", "青岛市", "淄博市", "枣庄市", "东营市", "烟台市", "潍坊市", "济宁市", "泰安市", "威海市", "日照市", "莱芜市", "临沂市", "德州市", "聊城市",
"滨州市", "菏泽市"
],
"15": ["郑州市", "开封市", "洛阳市", "平顶山市", "安阳市", "鹤壁市", "新乡市", "焦作市", "濮阳市", "许昌市", "漯河市", "三门峡市", "南阳市", "商丘市",
"信阳市", "周口市", "驻马店市", "省直辖县级行政区划"
],
"16": ["武汉市", "黄石市", "十堰市", "宜昌市", "襄阳市", "鄂州市", "荆门市", "孝感市", "荆州市", "黄冈市", "咸宁市", "随州市", "恩施土家族苗族自治州",
"省直辖县级行政区划"
],
"17": ["长沙市", "株洲市", "湘潭市", "衡阳市", "邵阳市", "岳阳市", "常德市", "张家界市", "益阳市", "郴州市", "永州市", "怀化市", "娄底市",
"湘西土家族苗族自治州"
],
"18": ["广州市", "韶关市", "深圳市", "珠海市", "汕头市", "佛山市", "江门市", "湛江市", "茂名市", "肇庆市", "惠州市", "梅州市", "汕尾市", "河源市", "阳江市",
"清远市", "东莞市", "中山市", "潮州市", "揭阳市", "云浮市"
],
"19": ["南宁市", "柳州市", "桂林市", "梧州市", "北海市", "防城港市", "钦州市", "贵港市", "玉林市", "百色市", "贺州市", "河池市", "来宾市", "崇左市"],
"20": ["海口市", "三亚市", "三沙市", "儋州市", "省直辖县级行政区划"],
"21": ["重庆市"],
"22": ["成都市", "自贡市", "攀枝花市", "泸州市", "德阳市", "绵阳市", "广元市", "遂宁市", "内江市", "乐山市", "南充市", "眉山市", "宜宾市", "广安市", "达州市",
"雅安市", "巴中市", "资阳市", "阿坝藏族羌族自治州", "甘孜藏族自治州", "凉山彝族自治州"
],
"23": ["贵阳市", "六盘水市", "遵义市", "安顺市", "毕节市", "铜仁市", "黔西南布依族苗族自治州", "黔东南苗族侗族自治州", "黔南布依族苗族自治州"],
"24": ["昆明市", "曲靖市", "玉溪市", "保山市", "昭通市", "丽江市", "普洱市", "临沧市", "楚雄彝族自治州", "红河哈尼族彝族自治州", "文山壮族苗族自治州",
"西双版纳傣族自治州", "大理白族自治州", "德宏傣族景颇族自治州", "怒江傈僳族自治州", "迪庆藏族自治州"
],
"25": ["拉萨市", "日喀则市", "昌都市", "林芝市", "山南市", "那曲地区", "阿里地区"],
"26": ["西安市", "铜川市", "宝鸡市", "咸阳市", "渭南市", "延安市", "汉中市", "榆林市", "安康市", "商洛市"],
"27": ["兰州市", "嘉峪关市", "金昌市", "白银市", "天水市", "武威市", "张掖市", "平凉市", "酒泉市", "庆阳市", "定西市", "陇南市", "临夏回族自治州",
"甘南藏族自治州"
],
"28": ["西宁市", "海东市", "海北藏族自治州", "黄南藏族自治州", "海南藏族自治州", "果洛藏族自治州", "玉树藏族自治州", "海西蒙古族藏族自治州"],
"29": ["银川市", "石嘴山市", "吴忠市", "固原市", "中卫市"],
"30": ["乌鲁木齐市", "克拉玛依市", "吐鲁番市", "哈密市", "昌吉回族自治州", "博尔塔拉蒙古自治州", "巴音郭楞蒙古自治州", "阿克苏地区", "克孜勒苏柯尔克孜自治州", "喀什地区",
"和田地区", "伊犁哈萨克自治州", "塔城地区", "阿勒泰地区", "自治区直辖县级行政区划"
],
"31": ["台北市", "高雄市", "台南市", "台中市", "金门县", "南投县", "基隆市", "新竹市", "嘉义市", "新北市", "宜兰县", "新竹县", "桃园县", "苗栗县", "彰化县",
"嘉义县", "云林县", "屏东县", "台东县", "花莲县", "澎湖县"
],
"32": ["香港岛", "九龙", "新界"],
"33": ["澳门半岛", "氹仔岛", "路环岛"]
}
}
4.city.vue
<template>
<view class="city">
<view class="city_item flex1">
<!-- 左侧滑动导航栏 -->
<view class="city_item_left color81">
<scroll-view :scroll-y="true" style="height:calc(100vh - 88rpx);">
<view :class="indexsp == 'hot' ? 'active' : ''" @tap="setProvince" data-index="hot">
常见&热门
</view>
<view :class="indexsp == index ? 'active' : ''" v-for="(item,index) in province.a"
@tap="setProvince" :data-index="index">{{item}}</view>
</scroll-view>
</view>
<!-- 右侧选择导航栏 -->
<view class="city_item_right">
<!-- 选中城市展示 -->
<view class="current">
<text class="hot_title">当前选择城市:</text>
<view class="flex1">
<view>
<text>{{city}}</text>
</view>
</view>
</view>
<!-- 城市选项展示 -->
<view>
<!-- 热门城市选项 -->
<view class="hot" v-if="indexsp == 'hot'">
<button v-for="(item,index) in hotlist"
:class="indexOfs(current,item.name) ? 'active' : ''"
@tap="setCity(item.name)">{{item.name}}</button>
</view>
<!-- 城市选项 -->
<view class="hot">
<button v-for="(item,index) in province.o[indexsp]" @tap="setCity(item)"
:class="indexOfs(current,item) ? 'active' : ''">{{item}}</button>
</view>
<!-- 确认按钮 -->
<button class="submit f08btn" @tap="back">确定</button>
</view>
</view>
</view>
</view>
</template>
<script>
import provinces from "@/util/provinces.js"
// 导入省市数据
import cityData from '@/util/cityData.js';
// 导入热门城市数据
import hotData from '@/util/hotData.js'
export default {
data() {
return {
// 省市数据
province: cityData,
// 侧边导航选项索引
indexsp: 'hot',
// 选中城市数组
current: [],
// 热门城市数据
hotlist: hotData,
city: ""
};
},
onLoad(options) {
let that = this;
// 将页面传递过来的数据使用"|"符号分割开,存储到变量current中
that.current = options.city ? options.city.split('|') : [];
},
methods: {
// 获取省份
economize(str) {
provinces.forEach((item, index) => {
item.city.forEach((itt, idx) => {
if (itt.name == str) {
uni.setStorageSync('city',str)
uni.setStorageSync('economizeStr',item.name)
}
})
})
},
indexOfs(list, name) {
return list.indexOf(name) != -1;
},
setCity(city) { // city 当前点击的城市
this.city = city
},
// 确定按钮触发函数
back() {
this.economize(this.city)
uni.$emit('setCity', this.city);
// 返回上一个页面
uni.navigateBack({
delta: 1
})
},
// 侧边导航点击处理函数
setProvince(e) {
// 将点击元素的索引赋值到变量indexsp中
this.indexsp = e.currentTarget.dataset.index;
}
}
}
</script>
<style lang="scss" scoped>
.submit {
position: fixed;
bottom: 10rpx;
width: 500rpx
}
.f08btn {
background-color: #f08300 !important;
color: #fff;
font-size: 28rpx;
}
.city {
width: 100%;
&_title {
margin-bottom: 60rpx;
}
&_item {
padding-bottom: 20rpx;
align-items: flex-start;
&_left {
width: 210rpx;
display: inline-block;
background: #fafafa;
view {
text-align: center;
padding: 20rpx;
}
.active {
color: #f08300;
background: #fff;
}
}
&_right {
width: 500rpx;
display: inline-block;
padding-left: 20rpx;
position: fixed;
button {
border: 1rpx solid #f6f6f6;
}
.current {
padding: 20rpx 30rpx 0 0;
// 当前城市样式
.hot_title {
width: 100%;
display: inline-block;
color: #bfbfbf;
// line-height: 1;
vertical-align: middle;
margin-bottom: 22rpx;
}
.flex1 {
color: orange;
.data-v-57280228 {}
text {
font-size: 14px;
}
}
.icon {
width: 30rpx;
height: 35rpx;
display: inline-block;
vertical-align: middle;
}
view {
justify-content: space-between;
view {
width: calc(100% - 40rpx);
text {
display: inline-block;
}
}
}
}
.hot {
button {
color: #484848;
min-width: calc(50% - 20rpx);
// height: 65rpx;
background: #fff;
padding: 0 12rpx;
display: inline-block;
font-size: 24rpx;
margin: 18rpx 20rpx 0 0;
}
button:after {
border-color: #eee;
}
.active {
color: #f08300;
border: 1rpx solid #f08300;
}
.active:after {
border-color: #f08300;
}
}
}
}
}
</style>
<template>
<view class="city">
<view class="city_item flex1">
<!-- 左侧滑动导航栏 -->
<view class="city_item_left color81">
<scroll-view :scroll-y="true" style="height:calc(100vh - 88rpx);">
<view :class="indexsp == 'hot' ? 'active' : ''" @tap="setProvince" data-index="hot">
常见&热门
</view>
<view :class="indexsp == index ? 'active' : ''" v-for="(item,index) in province.a"
@tap="setProvince" :data-index="index">{{item}}</view>
</scroll-view>
</view>
<!-- 右侧选择导航栏 -->
<view class="city_item_right">
<!-- 选中城市展示 -->
<view class="current">
<text class="hot_title">当前选择城市:</text>
<view class="flex1">
<view>
<text>{{city}}</text>
</view>
</view>
</view>
<!-- 城市选项展示 -->
<view>
<!-- 热门城市选项 -->
<view class="hot" v-if="indexsp == 'hot'">
<button v-for="(item,index) in hotlist"
:class="indexOfs(current,item.name) ? 'active' : ''"
@tap="setCity(item.name)">{{item.name}}</button>
</view>
<!-- 城市选项 -->
<view class="hot">
<button v-for="(item,index) in province.o[indexsp]" @tap="setCity(item)"
:class="indexOfs(current,item) ? 'active' : ''">{{item}}</button>
</view>
<!-- 确认按钮 -->
<button class="submit f08btn" @tap="back">确定</button>
</view>
</view>
</view>
</view>
</template>
<script>
// 导入省市数据
import cityData from '@/util/cityData.js';
// 导入热门城市数据
import hotData from '@/util/hotData.js'
export default {
data() {
return {
// 省市数据
province: cityData,
// 侧边导航选项索引
indexsp: 'hot',
// 选中城市数组
current: [],
// 热门城市数据
hotlist: hotData,
city: ""
};
},
onLoad(options) {
let that = this;
// 将页面传递过来的数据使用"|"符号分割开,存储到变量current中
that.current = options.city ? options.city.split('|') : [];
},
methods: {
indexOfs(list, name) {
return list.indexOf(name) != -1;
},
setCity(city) { // city 当前点击的城市
this.city = city
if(this.current.length === 0){
this.current.push(city);
}else{
this.current = []
this.current.push(city);
}
},
// 确定按钮触发函数
back() {
this.economize(this.city)
uni.$emit('setCity', this.city);
// 返回上一个页面
uni.navigateBack({
delta: 1
})
},
// 侧边导航点击处理函数
setProvince(e) {
// 将点击元素的索引赋值到变量indexsp中
this.indexsp = e.currentTarget.dataset.index;
}
}
}
</script>
<style lang="scss" scoped>
.submit {
position: fixed;
bottom: 10rpx;
width: 500rpx
}
.f08btn {
background-color: #f08300 !important;
color: #fff;
font-size: 28rpx;
}
.city {
width: 100%;
&_title {
margin-bottom: 60rpx;
}
&_item {
padding-bottom: 20rpx;
align-items: flex-start;
&_left {
width: 210rpx;
display: inline-block;
background: #fafafa;
view {
text-align: center;
padding: 20rpx;
}
.active {
color: #f08300;
background: #fff;
}
}
&_right {
width: 500rpx;
display: inline-block;
padding-left: 20rpx;
position: fixed;
button {
border: 1rpx solid #f6f6f6;
}
.current {
padding: 20rpx 30rpx 0 0;
// 当前城市样式
.hot_title {
width: 100%;
display: inline-block;
color: #bfbfbf;
// line-height: 1;
vertical-align: middle;
margin-bottom: 22rpx;
}
.flex1 {
color: orange;
.data-v-57280228 {}
text {
font-size: 14px;
}
}
.icon {
width: 30rpx;
height: 35rpx;
display: inline-block;
vertical-align: middle;
}
view {
justify-content: space-between;
view {
width: calc(100% - 40rpx);
text {
display: inline-block;
}
}
}
}
.hot {
button {
color: #484848;
min-width: calc(50% - 20rpx);
// height: 65rpx;
background: #fff;
padding: 0 12rpx;
display: inline-block;
font-size: 24rpx;
margin: 18rpx 20rpx 0 0;
}
button:after {
border-color: #eee;
}
.active {
color: #f08300;
border: 1rpx solid #f08300;
}
.active:after {
border-color: #f08300;
}
}
}
}
}
</style>
5.城市页面返回上一页，接收数据
onShow() {
let that = this
uni.$on('setCity', function(name) {
that.city = name
})
},
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)