uni-app 原生导航栏相关设置

原生导航设置buttons时候监听点击事件

{
  "path": "pages/user/uses",
  "style": {
    "app-plus": {
      "bounce": "none",
      "titleNView": {
        "buttons": [
          {"text": "分享"},
          {"text": "分享22"},
          {"text": "分享233"}
        ],
        "backButton": {
          "background": "#00FF00"
        }
      }
    }
  }
},

监听
import { onReady } from '@dcloudio/uni-app'
onNavigationBarButtonTap( (e) => {
  console.log (1111111)
  console.log (e)
})
 
// 透明渐变导航栏
"style": {
  "navigationBarTitleText": "透明渐变导航栏",
      "transparentTitle": "auto"
}
或者
 "app-plus": {
          "titleNView": {
            "type": "transparent"
          }
        }


// 中间图片导航栏
"style": {
  "navigationBarBackgroundColor": "#FFFFFF",
      "navigationBarTextStyle": "black",
      "titleImage": "https://web-assets.dcloud.net.cn/unidoc/zh/logo1@2x.png"
}

// 导航栏带红点和角标
"app-plus": {
  "titleNView": {
    "buttons": [{
      "text": "消息",
      "fontSize": "14",
      "redDot": true
    },
      {
        "text": "关注",
        "fontSize": "14",
        "badgeText": "12"
      }
    ]
  }
}

// 导航栏带搜索框
"app-plus": {
  "titleNView": {
    "type": "transparent",
        "titleColor": "#fff",
        "backgroundColor": "#007AFF",
        "buttons": [{
      "fontSrc": "/static/uni.ttf",
      "text": "\ue537",
      "width": "40px",
      "fontSize": "28px",
      "color": "#fff",
      "background": "rgba(0,0,0,0)"
    }],
        "searchInput": {
      "backgroundColor": "#fff",
          "borderRadius": "6px",
          "placeholder": "请输入地址 如:大钟寺",
          "disabled": true
    }
  }

// 导航栏带城市选择
"app-plus": {
  "titleNView": {
    "buttons": [{
      "text": "北京市",
      "fontSize": "14",
      "select": true,
      "width": "auto"
    }]
  }
}

原生导航栏设置

 uni.setNavigationBarTitle({
    title: '请设置支付密码'
  })
 uni.setNavigationBarColor({
    frontColor: '#000000', // 前景颜色值,仅支持 #ffffff 和 #000000
    backgroundColor: '#eebf94', // 背景颜色值
    success: function() {
      console.log('状态栏颜色已更改!');
    },
    fail: function(err) {
      console.error('更改状态栏颜色失败:', err);
    }
  });

还可以
"style": {
        "navigationBarTitleText": "2222",
        "app-plus": {
          "bounce": "none",
          "titleNView": {
            "titleColor": "#f02656",
            "buttons": [
              {"text": "分享", "fontSize": "20rpx"}
            ],
            "backButton": {
              "background": "#00FF00"
            }
          }
        }

posted on   完美前端  阅读(630)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
历史上的今天:
2020-09-22 node 启动命令

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示