更新记录

1.0.0（2025-10-12） 下载此版本

• 显示当前选中的城市
• 点击当前城市弹出选择面板
• 选择城市后自动更新并关闭面板
• 支持关键词搜索城市
• 实时过滤符合条件的城市
• 无结果时显示提示信息

平台兼容性

uni-app(3.6.10)

其他

# 城市选择器

开发文档参考：https://hx.dcloud.net.cn

# 功能说明

城市展示与切换：

• 显示当前选中的城市
• 点击当前城市弹出选择面板
• 选择城市后自动更新并关闭面板

城市检索：

• 支持关键词搜索城市
• 实时过滤符合条件的城市
• 无结果时显示提示信息

快捷导航：

• 热门城市快速选择
• 按首字母分组展示
• 右侧索引快速定位

交互体验：

• 点击遮罩层关闭面板
• 城市项点击反馈
• 搜索框清除功能

本示例使用步骤：

1. 查找插件 进入插件市场：打开 HBuilderX 编辑器，点击菜单栏中的 “插件” -> “插件市场”，或者直接访问uni-app 插件市场官网 。 搜索插件：在插件市场的搜索框中输入关键词，查找本插件，比如搜索 “城市选择器” 。 筛选插件：筛选出城市选择器插件。

2. 安装插件 方式一：在 HBuilderX 中安装 在插件市场找到目标插件后，点击进入插件详情页。 点击 “使用 HBuilderX 导入插件” 按钮（如果是免费插件，直接导入；如果是付费插件，需要先购买 ）本插件是免费免费的喽。 选择要导入插件的 uni-app 项目，确认导入。导入成功后，插件会被放置在项目的 uni_modules 目录下。 方式二：通过命令行安装（适用于发布到 npm 的插件） 打开命令行工具，进入你的 uni-app 项目根目录。 执行 npm install 插件名称 命令，例如 npm install my-uniapp-plugin 。安装完成后，同样可以在项目的 uni_modules 目录下找到该插件。

3. 引入插件

   import CitySelector from '@/components/CitySelector.vue'

4. 修改manifest.json替换为自己的appid