uniapp顶部导航栏实现自定义功能按钮+搜索框并监听响应事件

目录

第一步：先下载按钮需要展示的图标（若不使用图标，直接使用文字可跳过这步）

1、点击需要的图标，添加入库

2、点击旁边的购物车，在弹出的窗口中选择下载代码

3、解压下载的压缩包，将这几个iconfont文件复制出来

4、在uniapp项目的static文件夹下边创建一个font文件夹，将刚刚复制的文件放到这里边

第二步：自定义按钮

第三步：展示搜索输入框

*配置pages.json的完整实例(可直接复制使用)：

第四步：设置自定义按钮的点击事件（在.vue文件中与methods同级）

第五步：监听原生标题栏搜索输入框输入内容变化事件（在.vue文件中与methods同级）

---

最终实现效果：

第一步：先下载按钮需要展示的图标（若不使用图标，直接使用文字可跳过这步）

到阿里图标库官网下载需要的字体图标：iconfont-阿里巴巴矢量图标库

1、点击需要的图标，添加入库

2、点击旁边的购物车，在弹出的窗口中选择下载代码

3、解压下载的压缩包，将这几个iconfont文件复制出来

4、在uniapp项目的static文件夹下边创建一个font文件夹，将刚刚复制的文件放到这里边

第二步：自定义按钮

更改pages.json下指定界面的style属性