uniapp如何自定义顶部导航

bm123

uniapp很多情况下并不想要系统自带导航，如果自定义导航呢？

思路：导航栏高度计算 + 胶囊高度

第一步：首先设置page.json,代码如下，意思是通顶
"navigationStyle": "custom"
第二步：极端导航栏高度
onLoad() {

        let res = uni.getSystemInfoSync();
        let menu = wx.getMenuButtonBoundingClientRect();
        this.statusBarHeight = (menu.top - res.statusBarHeight) * 2 + menu.height + res.statusBarHeight;
        if (res.model.indexOf('iPhone') > -1) {
                this.statusBarHeight += 4
        }
               
}
第三步：胶囊高度计算
// 获取导航栏高度
getSystemStatus() {
        setTimeout(() => {
                uni.getSystemInfo({
                success: function(res) {
                        let menu = wx.getMenuButtonBoundingClientRect(); //获取获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。（top表示上边框到手机顶部的距离 bottom是下边框到手机顶部的距离）
                        console.log('下至'+menu.bottom,'上至'+menu.top,'这个？'+res.statusBarHeight)
                        console.log(menu.bottom + menu.top - res.statusBarHeight,'看下参数')

                        }
                });
        })
},

李宜桀

可以可以

110qwe110

支持开源~！感谢分享！

yang5311299

支持开源~！感谢分享！

云从东方来

值得收藏

云从东方来

谢谢分享

天堂ω狮子心

写的 很棒 支持一下

bm123

外星人群控 发表于 2022-8-8 10:01
感谢分享,等有空了,我也要学习一下uniapp

欢迎大佬一起探讨

外星人群控

感谢分享,等有空了,我也要学习一下uniapp