uniapp修改导航栏的文字和图标并触发事件
uniapp导航栏自定义文字图标设置
·
目录
1.设置图标
1.把图标下载到本地
2.放在项目里面
3.把iconfont.ttf引入到pages.json使用
text就是对应的图标编号(在iconfont.css里面可以查看编号)
注意:在使用的时候要把 \e719 改为 \ue719 加一个u
{
"path": "pages/chat/groupChat/groupChat",
"style": {
"navigationBarTitleText": "该群已解散",
"navigationBarBackgroundColor": "#ffffff",
"app-plus": {
"titleNView": {
"buttons": [{
"text": "\ue719",
"fontSrc": "/static/iconfont/iconfont.ttf",
"color": "#000",
"fontSize": "40px",
"width": "50px"
}]
}
}
}
},
2.设置文字
text属性里面直接写显示的文字
{
"path": "pages/chat/groupChat/groupChat",
"style": {
"navigationBarTitleText": "该群已解散",
"navigationBarBackgroundColor": "#ffffff",
"app-plus": {
"titleNView": {
"buttons": [{
"text": "设置",
"color": "#000",
"fontSize": "15px",
"width": "50px"
}]
}
}
}
},
3.设置两个自定义(一般只设置右边)
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "页面",
"navigationStyle": "custom",
"app-plus": {
"titleNView": {
"buttons": [{
"text": "\uF3B0",
"fontSrc": "/static/MyFlutterApp.ttf",
"fontSize": "25px",
"float": "left",//左边图标
"width": "65px"
}, {
"text": "\uEA07",
"fontSrc": "/static/MyFlutterApp.ttf",
"fontSize": "25px",
"float": "right",//右边图标
"width": "65px"
}]
}
}
}
}
4.触发导航栏按钮
// 导航栏进入设置
onNavigationBarButtonTap: function(e) {
console.log(e);
uni.navigateTo({
url: '/pages/chat/privateChat/friend?to=' + this.frienduuid + '=' +
this.title
})
},
onNavigationBarButtonTap(e){}
触发事件得到导航栏信息
更多推荐
已为社区贡献6条内容
所有评论(0)