帖子
帖子
用户
博客
课程
显示全部楼层
63
帖子
2
勋章
318
Y币

[App引擎] 小程序头部如何顶上去

[复制链接]
发表于 2022-3-26 14:05:42
WechatIMG421.jpeg

小程序这个页面怎么能向图里面一样,把页面顶上去,head然后能不能加左边那俩图标喜欢和搜索
380
帖子
4
勋章
6
Y币
safeArea
页面不被其它内容(如状态栏)遮住的区域,JSON对象

通过safeArea能够知道当前页面哪些地方被遮住,从而做出相应的调整,保证页面重要元素不被遮挡住。

比如应对顶部header被状态栏遮住一部分,可以为header增加一个paddingTop,如:

header.style.paddingTop = api.safeArea.top + 'px';
在比如在iPhone X上面,底部的导航菜单会被虚拟Home键遮住一部分,可以为footer增加一个paddingBottom,如:

footer.style.paddingBottom = api.safeArea.bottom + 'px';
内部字段:

{
    top:            // 安全区域上边缘,对于沉浸式下window中该值通常为状态栏高度,全屏或非沉浸式下为0(iPhone X竖屏时全屏状态下也为44)
    left:            // 安全区域左边缘,通常为0(iPhone X横屏时为44)
    bottom:            // 安全区域下边缘,通常为0(iPhone X竖屏时为34,横屏时为21)
    right:            // 安全区域右边缘,通常为0(iPhone X横屏时为44)
}
示例代码
var safeArea = api.safeArea;        // JSON对象,如{top:20, left:0, bottom:0, right:0}
63
帖子
2
勋章
318
Y币
我是开发小程序的,这个代码加哪里啊,报错:ReferenceError: header is not defined
技术支持-F · 2022-3-26 16:43safeArea
页面不被其它内容(如状态栏)遮住的区域,JSON对象

小程序请查看对应官方文档
您需要登录后才可以回帖 登录

本版积分规则