更新记录

1.0.1（2026-09-29） 下载此版本

1、补充完整的插件说明文档：9 种样式逐一说明、使用方式、兼容性 2、更换插件宣传图，一图展示全部 9 种搜索框样式

1.0.0（2026-04-08） 下载此版本

发版

平台兼容性

uni-app(4.66)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
√ - √ - √ - - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
√ - √ - - - - - - - - -

多种样式搜索框

一套可直接复用的搜索框页面模板，内置 9 种主流样式，覆盖电商、内容社区、工具类应用的常见搜索场景。每种样式都是一个独立页面，按需复制到自己的项目中即可。

一、效果总览

导入后在 HBuilderX 中运行 pages/index/index.vue，可以在一页里看到全部 9 种样式。

二、9 种样式

页面 样式 说明
pages/index/searBar.vue 基础胶囊 白底胶囊 + 左侧放大镜 + 右侧主题色「搜索」按钮
pages/index/searBar1.vue 带分类前缀 左侧显示「壁纸」等分类名，与输入区用竖线分隔
pages/index/searBar2.vue 主题色实心 深色实心胶囊，右侧圆形消息入口（带红点角标）
pages/index/searBar3.vue 浅绿描边 浅色底 + 内嵌白色输入区，适合轻盈风格
pages/index/searBar4.vue 带登录入口 右侧「登录」按钮，用于未登录态引导
pages/index/searBar5.vue 紫色实心 高饱和主题色，适合品牌页
pages/index/searBar6.vue 暖色系 橙色实心 + 深色文字，适合活动 / 节日场景
pages/index/searBar7.vue 蓝色描边 冷色系，适合工具类应用
pages/index/searBar8.vue 极简白底 深色分类名 + 占位文案，最轻量的一种

三、使用方式

  1. 导入模板到项目（或只复制 pages/index 下需要的页面文件与 static 内的图标）
  2. 在 pages.json 中注册目标页面
  3. 替换占位文案、主题色、按钮文案，并接上自己的搜索跳转逻辑

以「基础胶囊」为例，改动点集中在三处：

占位文案   placeholder="搜索美食/民宿/攻略等"
主题色     按钮与图标的 color / background
跳转逻辑   @confirm / @click 里换成自己的路由

四、兼容性

  • 适用平台：App（vue）、H5、微信小程序
  • 最低 HBuilderX 版本：4.66

五、更新记录

见 changelog.md

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

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

无

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

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...