uniapp导航栏配置自定义按钮

此博客写的很详细了:https://www.cnblogs.com/xiaoyan2017/p/11531238.html

官方配置文档详见:https://uniapp.dcloud.io/collocation/pages?id=app-titlenview-buttons

贴代码

{
	"path" : "pages/weshare/ws-index/ws-index",
	"style" : {
		"navigationBarTitleText": "微享WeShare",
		"enablePullDownRefresh":true,
		"app-plus": {
			"titleNView": {
				"buttons": [
					{
						"color":"#fff",
						"float":"right",
						"fontSize":"32px",
						"type": "menu",  //使用uniapp自带的按钮
                                                "signType": "menuBtn" 
//onNavigationBarButtonTap里会监听出当前点击的导航栏按钮的配置对象,故这里可定义一个参数如signType,
//当监听出点击的按钮对象时,可根据对象中的signType参数的值,判断当前点击的是哪一个按钮
					},
					{
						"color":"#fff",
						"float":"right",
						"fontSize":"20px",
						"fontSrc":"/static/iconfont/iconfont.ttf",  //此处有说明,见下方
						"text": "\ue672",  //自定义按钮
                                                "signType": "homeBtn"
					}
				]
			}
		}
	}	
},

关于iconfont.ttf文件的引用及说明

iconfont的引用详见:https://www.cnblogs.com/huihuihero/p/12657945.html

unicode形式的使用说明:

如上图,将 &#x 替换为 \u 即可。如 &#xe737 -> \ue737

unicode不生效的说明:
若新增了icon图库,并更新了iconfont.css和iconfont.ttf文件,则需要重新运行app基座才行,否则不生效。

关于导航栏自定义按钮点击事件的监听

监听按钮、输入框事件,uni-app给出了相应API,只需把onNavigationBarButtonTap和onNavigationBarSearchInputChanged,写在响应的页面中即可
//监听原生导航栏按钮点击事件
onNavigationBarButtonTap(e){
	console.log(e)
},
posted @   huihuihero  阅读(4366)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示