开启辅助访问 切换到宽版

精易论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

用微信号发送消息登录论坛

新人指南 邀请好友注册 - 我关注人的新帖 教你赚取精币 - 每日签到


求职/招聘- 论坛接单- 开发者大厅

论坛版规 总版规 - 建议/投诉 - 应聘版主 - 精华帖总集 积分说明 - 禁言标准 - 有奖举报

查看: 7879|回复: 8
收起左侧

[技术分享] uniapp如何自定义顶部导航

[复制链接]
结帖率:94% (255/272)
发表于 2022-8-8 09:57:44 | 显示全部楼层 |阅读模式   河南省郑州市

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,'看下参数')

                        }
                });
        })
},



发表于 2022-12-30 16:25:53 | 显示全部楼层   上海市上海市
可以可以
回复 支持 反对

使用道具 举报

签到天数: 3 天

发表于 2022-9-1 23:28:43 | 显示全部楼层   山东省济宁市
支持开源~!感谢分享!
回复 支持 反对

使用道具 举报

结帖率:100% (1/1)
发表于 2022-8-24 18:07:29 | 显示全部楼层   河北省沧州市
支持开源~!感谢分享!
回复 支持 反对

使用道具 举报

结帖率:100% (1/1)

签到天数: 2 天

发表于 2022-8-13 17:01:01 | 显示全部楼层   浙江省湖州市
值得收藏
回复 支持 反对

使用道具 举报

结帖率:100% (1/1)

签到天数: 2 天

发表于 2022-8-13 17:00:43 | 显示全部楼层   浙江省湖州市
谢谢分享
回复 支持 反对

使用道具 举报

结帖率:83% (25/30)
发表于 2022-8-8 13:14:54 | 显示全部楼层   河北省廊坊市
写的 很棒 支持一下
回复 支持 反对

使用道具 举报

结帖率:94% (255/272)

签到天数: 25 天

 楼主| 发表于 2022-8-8 10:11:55 | 显示全部楼层   河南省郑州市
外星人群控 发表于 2022-8-8 10:01
感谢分享,等有空了,我也要学习一下uniapp

欢迎大佬一起探讨
回复 支持 反对

使用道具 举报

结帖率:96% (65/68)
发表于 2022-8-8 10:01:33 | 显示全部楼层   上海市上海市
感谢分享,等有空了,我也要学习一下uniapp
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则 致发广告者

发布主题 收藏帖子 返回列表

sitemap| 易语言源码| 易语言教程| 易语言论坛| 诚聘英才| 易语言模块| 手机版| 广告投放| 精易论坛
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论,本站内容均为会员发表,并不代表精易立场!
论坛帖子内容仅用于技术交流学习和研究的目的,严禁用于非法目的,否则造成一切后果自负!如帖子内容侵害到你的权益,请联系我们!
防范网络诈骗,远离网络犯罪 违法和不良信息举报电话0663-3422125,QQ: 800073686,邮箱:800073686@b.qq.com
Powered by Discuz! X3.4 揭阳市揭东区精易科技有限公司 ( 粤ICP备12094385号-1) 粤公网安备 44522102000125 增值电信业务经营许可证 粤B2-20192173

快速回复 返回顶部 返回列表