uniapp选择城市功能

1. 效果图

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
            })
        },