学无先后,达者为师

网站首页 编程语言 正文

uni-app 导航栏自定义图标及图标的点击事件

作者:海鸥-w 更新时间: 2023-07-13 编程语言

uniapp导航栏配置自定义按钮

{
	"path" : "pages/weshare/ws-index/ws-index",
	"style" : {
		"navigationBarTitleText": "微享WeShare",
		"enablePullDownRefresh":true,
		"app-plus": {
			"titleNView": {
				"buttons": [
					{
						"color":"#fff",
						"float":"right",
						"fontSize":"32px",
						"type": "menu", 
                     "signType": "menuBtn" 
					},
					{
						"color":"#fff",
						"float":"right",
						"fontSize":"20px",
						"fontSrc":"/static/iconfont/iconfont.ttf",  //此处有说明,见下方
						"text": "\ue672",  //自定义按钮
                                                "signType": "homeBtn"
					}
				]
			}
		}
	}	
},

关于iconfont.ttf文件的引用及说明
unicode形式的使用说明:
如上图,将 &#x 替换为 \u 即可。如 &#xe737 -> \ue737
unicode不生效的说明:
若新增了icon图库,并更新了iconfont.css和iconfont.ttf文件,则需要重新运行app基座才行,否则不生效。

关于导航栏自定义按钮点击事件的监听
监听按钮、输入框事件,uni-app给出了相应API,只需把onNavigationBarButtonTap和onNavigationBarSearchInputChanged,写在响应的页面中即可
//监听原生导航栏按钮点击事件
onNavigationBarButtonTap(e){
console.log(e)
},

原文链接:https://blog.csdn.net/weixin_50379372/article/details/128162681

  • 上一篇:没有了
  • 下一篇:没有了
栏目分类
最近更新