uni-app原生导航栏自定义图标及去掉图标

今天药忘吃喽~ 2023-01-18 04:03 623阅读 0赞

uni-app自定义原生导航栏

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

  1. { //人员对比详情
  2. "path": "personnel-panorama-contrast/index",
  3. "style": {
  4. "navigationBarTitleText": "人员对比详情",
  5. "app-plus": {
  6. "titleNView": {
  7. "backgroundImage": "#FFFFFF",
  8. //自定义右边导航栏标
  9. "buttons": [
  10. {
  11. "text": "\ue6f7",
  12. "fontSrc": "/static/fonts/iconfont.ttf",
  13. "fontWeight": "normal",
  14. "width": "46px",
  15. "fontSize": "36rpx",
  16. "float": "right"
  17. }
  18. ]
  19. }
  20. }
  21. }
  22. },

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

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

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

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

    onNavigationBarButtonTap(e) {

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

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

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

    if(e.pageTitle === “高频出差”){

    1. // #ifdef APP-PLUS
    2. var webView = this.$mp.page.$getAppWebview();
    3. // 修改buttons
    4. webView.setTitleNViewButtonStyle(0, {
    5. width: '0',
    6. });
    7. // #endif
    8. }

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

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

在这里插入图片描述

发表评论

表情:
评论列表 (有 0 条评论,623人围观)

还没有评论,来说两句吧...

相关阅读

    相关 uni-app定义导航图标

    引言 导航栏在APP中引导说明的作用,通过导航描述,我们可以快速定位该页面的主要功能,不过现在的应用逐渐走向多元化,比如有些页面需要文字导航、有些需要图标导航、有些需要透