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属性

点击这里可以查看uniapp中pages.json相关属性信息

这里主要需要配置app-plus属性,下边是相关的属性信息,导航主要需要配置titleNView属性

不需要字体图标的话可以直接在text中设置展示的文字内容 比如**"text":"提交"**

注意:如果使用字体图标,需要配置text和fontSrc这两个属性

text的设置:

在iconfont.css中找到需要设置的图标的content,在text中的写法必须是\u

复制代码
"text":"\ue607",

fontSrc设置读取ttf文件

复制代码
"fontSrc": "/static/font/iconfont.ttf",

buttons的完整代码设置

复制代码
"buttons":[
    {
        "text":"\ue607",
        "fontSrc": "/static/font/iconfont.ttf",
        "fontSize": "20px"
    },
    {
        "text":"\ue647",
        "fontSrc": "/static/font/iconfont.ttf",
        "fontSize": "24px"
    }
],

第三步:展示搜索输入框

和buttons同级配置searchInput属性

复制代码
"searchInput":{
    "placeholder":"查询",
    "align":"left",
    "backgroundColor":"#fff"
}

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

复制代码
{
    "path": "pages/zjgl/index",
    "style": {
        "navigationBarTitleText": "钻机管理",
        "app-plus":{
        "titleNView":{
        "buttons":[
            {
                "text":"\ue607",
                "fontSrc": "/static/font/iconfont.ttf",
                "fontSize": "20px"
            },
            {
                "text":"\ue647",
                "fontSrc": "/static/font/iconfont.ttf",
                "fontSize": "24px"
            }
        ],
        "searchInput":{
            "placeholder":"查询",
            "align":"left",
            "backgroundColor":"#fff"
        }
       }
     }
    }
},

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

监听远程标题栏按钮点击事件:onNavigationBarButtonTap

前台打印可以发现点击按钮获取到的信息

根据index属性进行监听设置按钮的功能

javascript 复制代码
onNavigationBarButtonTap:function(e){
    if(e.index == 0){
        //重新请求列表
        uni.$u.toast('界面刷新')
    }else if(e.index == 1){
        //新增信息
        uni.navigateTo({
            url:'/pages/sysy/tssy'
        })
    }
},

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

输入框这里有三个方法,这里根据需求,我使用的是onNavigationBarSearchInputChanged方法,输入框内容变化就会请求数据刷新列表,这里各位根据需求进行使用即可。

javascript 复制代码
onNavigationBarSearchInputChanged(e){
    uni.$u.toast(e.text) //展示用户在输入框中输入的内容
},

至此,效果完美实现喽。

相关推荐
web_Hsir4 分钟前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir5 分钟前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
CYRUS STUDIO36 分钟前
Unidbg Trace 反 OLLVM 控制流平坦化(fla)
android·汇编·算法·网络安全·逆向·ollvm
扫地的小何尚1 小时前
NVIDIA工业设施数字孪生中的机器人模拟
android·java·c++·链表·语言模型·机器人·gpu
fakaifa2 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
顾林海3 小时前
深度解析ArrayList工作原理
android·java·面试
安静的海岸_AI3 小时前
Android端WIFI/流量共存技术方案
android
_一条咸鱼_3 小时前
Android Compose 框架进度指示器深入剖析(五十二)
android
张风捷特烈3 小时前
Flutter 伪 3D 绘制#02 | 地平面与透视
android·flutter
每次的天空4 小时前
Kotlin 作用域函数:apply、let、run、with、also
android·开发语言·kotlin