更新记录

1.0.3(2019-10-09)

更新支持动态更新数据

1.0.2(2019-10-08)

新增搜索功能

查看更多

城市选择插件说明


目录结构

  • components ---组件目录
  • pages --- 页面目录(DEMO)

使用方式

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

功能介绍

  • activeCity --- 当前城市
  • hotCity --- 热门城市
  • obtainCitys --- 需要排序的城市数据
  • isSearch --- 是否有搜索功能
  • cityClick --- 点击城市回调方法
    //当前定位城市
    activeCity: {
        type: Object,
        default: () => ({
            'cityCode': '320100',
            cityName: '南京市'
        })
    },
    //热门城市
    hotCity: {
        type: Array,
        default: () => [{
            'cityCode': '320100',
            'cityName': '南京市',
        }],
    },
    //城市数据
    obtainCitys: {
        type: Array,
        default: () => [],
    },
    //是否有搜索
    isSearch:{
        type:Boolean,
        default:true
    }

示例数据

[{
        'cityCode': '110100',
        'cityName': '北京'
    }, {
        'cityCode': '120100',
        'cityName': '天津'
    }, {
        'cityCode': '130100',
        'cityName': '石家庄市'
    }, {
        'cityCode': '130200',
        'cityName': '唐山市'
    }, {
        'cityCode': '130300',
        'cityName': '秦皇岛市'
    }, {
        'cityCode': '130400',
        'cityName': '邯郸市'
    }, {
        'cityCode': '130500',
        'cityName': '邢台市'
    }, {
        'cityCode': '130600',
        'cityName': '保定市'
    }
]

完整 Demo

<template>
    <view>
        <city-select @cityClick="cityClick" :activeCity="activeCity" :hotCity="hotCity" :obtainCitys="obtainCitys" :isSearch="true" ref="citys"></city-select>
    </view>
</template>


    import citySelect from "@/components/city-select/city-select.vue"
    export default {
        data() {
            return {
                //当前城市
                activeCity: {
                    'cityCode': '320100',
                    'cityName': '南京市',
                },
                //热门城市
                hotCity: [{
                        'cityCode': '320100',
                        'cityName': '南京市',
                    },
                    {
                        'cityCode': '110100',
                        'cityName': '北京市',
                    }
                ],
                //显示的城市数据
                obtainCitys: [{
                    'cityCode': '110100',
                    'cityName': '北京'
                }, {
                    'cityCode': '120100',
                    'cityName': '天津'
                }, {
                    'cityCode': '130100',
                    'cityName': '石家庄市'
                }, {
                    'cityCode': '130200',
                    'cityName': '唐山市'
                }, {
                    'cityCode': '130300',
                    'cityName': '秦皇岛市'
                }, {
                    'cityCode': '130400',
                    'cityName': '邯郸市'
                }, {
                    'cityCode': '130500',
                    'cityName': '邢台市'
                }, {
                    'cityCode': '130600',
                    'cityName': '保定市'
                }]
            }
        },
        components: {
            citySelect,
        },
        onLoad() {
            //动态更新数据
            setTimeout(()=> {
                this.obtainCitys = [{
                    'cityCode': '650100',
                    'cityName': '乌鲁木齐市'
                }, {
                    'cityCode': '650200',
                    'cityName': '克拉玛依市'
                }, {
                    'cityCode': '652100',
                    'cityName': '吐鲁番地区'
                }, {
                    'cityCode': '652200',
                    'cityName': '哈密地区'
                }, {
                    'cityCode': '652300',
                    'cityName': '昌吉回族自治州'
                }, {
                    'cityCode': '652700',
                    'cityName': '博尔塔拉蒙古自治州'
                }, {
                    'cityCode': '652800',
                    'cityName': '巴音郭楞蒙古自治州'
                }, {
                    'cityCode': '652900',
                    'cityName': '阿克苏地区'
                }]
                console.log("更新数据")
            }, 5000);
        },
        methods: {
            cityClick(item) {
                uni.showToast({
                    icon: 'none',
                    title: "item: " + JSON.stringify(item),
                    // #ifdef MP-WEIXIN
                    duration: 3000,
                    // #endif
                    mask: true
                })
            }
        }
    }


<style>
</style>

运行方式

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

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

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

2. 本插件采集的手机端数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问