知识分类
后端
前端
设计
开源组件/产品
APP
其他
广告招募

让uniapp的uni-drawer组件不遮挡自定义导航栏

管理员
发布于:2023-04-22 12:52:48

在uniapp开发小程序中如果使用了自定义的导航栏 并且使用了uni-drawer组件,uni-drawer组件会遮挡状态栏和导航栏,效果图如下:

如何解决这个问题呢?

要是能控制drawer的margin-top 就好了,所以可以这样解决:

计算状态栏的高度和自定义导航栏(uniapp默认的导航栏高度时间44,根据自己情况调整)的高度,JS代码如下:

const res = wx.getSystemInfoSync();
const statusHeight = res.statusBarHeight; //状态栏高度
const cusnavbarheight = (statusHeight + 44) + "px";

样式代码如下(注意加上lang="scss"):

<style scoped lang="scss">
	::v-deep .uni-drawer {
		margin-top: v-bind(cusnavbarheight)
	}
</style>

最终效果图:

上一篇:警惕!1px并不等于2rpx,px和rpx的转换算法
下一篇:JavaScript通过年月判断当月的天数,支持闰年
搜索内容
最新文章
  • 连接WIFI出现无Internet
  • 免费AI SEO工具,SEO的AI生
  • OBS在银河麒麟或ubuntu等核心
  • 常见主板开机进入bios热键,一张图
  • 微软常用运行库VC++合集下载,解决
  • MSYS2中安装使用GCC的正确方法
  • 用了这些网站,多出来的时间让你摸鱼
  • 优麒麟操作系统(麒麟系统社区版)安装
  • 推荐一个Vscode插件,让你写正则
  • MinDoc文档管理系统linux环
精彩文章
  • 1 php将数字转成EXCEL列名,支持
  • 2 什么是PHP站群以及使用php开源框
  • 3 连接WIFI出现无Internet
  • 4 免费AI SEO工具,SEO的AI生
  • 5 FrameCoder非可,基于web
  • 6 PBOOTCMS安全加固方法解析与实
  • 7 常见主板开机进入bios热键,一张图
  • 8 MSYS2中安装使用GCC的正确方法
  • 9 Layui 怎么样更换主题颜色?
  • 10 小程序真机调试 报错 define
工信部备案:苏ICP备2023011827号-1
苏公网安备 32111202000338号