uniapp设置顶部导航栏
文章描述：
uniapp如何设置顶部栏的图片
顶部导航栏并且更换图标目前支持H5、APP，暂不支持微信小程序
下载图标
阿里巴巴矢量图选择自己喜欢的图标
网址：https://www.iconfont.cn/
加入收藏后下载：
下载后把iconfont.ttf放在uniapp项目static下面
uniapp
pages.json
{
"path": "pages/demo/demo",
"style": {
"navigationBarTitleText": "uniapp",
"app-plus": {
"titleNView": {
"buttons": [{
"text": "\ue651",
"fontSrc": "/static/iconfont.ttf",
"fontSize": "22px",
"float": "left"
},
{
"text": "\ueb78",
"fontSrc": "/static/iconfont.ttf",
"fontSize": "22px",
"float": "right"
}
]
}
}
}
}运行效果如下：
点击事件
onNavigationBarButtonTap
onNavigationBarButtonTap 这个方法和 data，onLoad，methods 同级
onNavigationBarButtonTap(e) {
console.log(e)
var str = e.index;
if(str == 0){
var txt = "搜索"
}
if(str == 1){
var txt = "添加"
}
uni.showToast({
title:txt,
icon:"none"
})
},打印结果：
{
"text": "",
"fontSrc": "/static/iconfont.ttf",
"fontSize": "22px",
"float": "left",
"onclick": "function() { [native code] }",
"__cb__": {
"id": "plus31638173268660",
"htmlId": "__uniapp__service"
},
"index": 0
}
发布时间：2021/11/29
发表评论