热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

uniapp原生导航栏自定义图标及去掉图标

uni-app自定义原生导航栏下面是部分代码并不是完整的,这

uni-app自定义原生导航栏

下面是部分代码并不是完整的,这里只用作引子

{ //人员对比详情
"path": "personnel-panorama-contrast/index",
"style": {
"navigationBarTitleText": "人员对比详情",
"app-plus": {
"titleNView": {
"backgroundImage": "#FFFFFF",
//自定义右边导航栏标
"buttons": [
{
"text": "\ue6f7",
"fontSrc": "/static/fonts/iconfont.ttf",
"fontWeight": "normal",
"width": "46px",
"fontSize": "36rpx",
"float": "right"
}
]
}
}
}
},

自定义右边导航栏图标用的阿里图标库

  • 目录位置展示
    在这里插入图片描述
  • 阿里图标库选择-选择unicode选项
    在这里插入图片描述

干的漂亮,现在我们已经在原生导航栏定义了我们想要的图标,那么怎么监听页面时间呢?定义页面图标必然需要监听它做一些处理,官方必然给我们一些方案了。

  • 这是本人目前用到的监听效果

onNavigationBarButtonTap(e) {
console.log("监听自定义图标点击了");
uni.navigateTo({
url:"pages/invest/personnel-panorama-add-list/index"
})
}

还没完呢,当然还有一些很难想象到的业务场景,比如现在共用一个页面,这个页面一个需要自定义icontfont,一个不需要那么我们怎么将不需要的自定义小图片去掉呢

  • 整点有用的吧?直接上代码了

if(e.pageTitle === "高频出差"){
// #ifdef APP-PLUS
var webView = this.$mp.page.$getAppWebview();
// 修改buttons
webView.setTitleNViewButtonStyle(0, {
width: '0',
});
// #endif
}

这里是根据url中带过来的题目判断是都去掉自定义的原生导航栏上自定义图标

↓↓↓ 个人写的一个公众号,还在完善中 ↓↓↓ | ᴥ•́ )✧ ↓↓↓

在这里插入图片描述


推荐阅读
author-avatar
皇家冷情绪
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有