uni-app 提供内置 CSS 变量,用来解决H5、小程序、App不同平台内容区域不一致的问题
var(--status-bar-height) 此变量在微信小程序环境为固定 25px,在 App 里为手机实际状态栏高度。
当设置 "navigationStyle":"custom" 取消原生导航栏后,由于窗体为沉浸式,占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部,避免页面内容出现在状态栏。
由于在 H5 端,不存在原生导航栏和 tabbar,也是前端 div 模拟。如果设置了一个固定位置的居底 view,在小程序和 App 端是在 tabbar 上方,但在 H5 端会与 tabbar 重叠。此时可使用--window-bottom,不管在哪个端,都是固定在 tabbar 上方。
目前 nvue 在 App 端,还不支持 --status-bar-height变量,替代方案是在页面 onLoad 时通过 uni.getSystemInfoSync().statusBarHeight 获取状态栏高度,然后通过 style 绑定方式给占位 view 设定高度。下方提供了示例代码
使用举例:
.status_bar {
height: var(--status-bar-height);
width: 100%;
}
.toTop {
bottom: calc(var(--window-bottom) + 10px);
}
以上内容来自uniapp官方文档:https://uniapp.dcloud.io/tutorial/syntax-css.html#css-%E5%8F%98%E9%87%8F
-
追格小程序帖子评论如何改成未审核仅限自己查看追格小程序帖子评论在未审核的情况,前端所有人都不可见,仅管理在后台可见。若我们想改成未审核仅限自己查看,可以按照以下方法修改。
-
追格商城小程序v1.3.6 新增热门搜索功能追格商城小程序v1.3.6 新增热门搜索功能
-
追格商城小程序(开源版)发布小程序备案号设置功能追格商城小程序(开源版)基于WordPress和uniapp进行开发的微信商城系统,代码无加密、无后门,简单配置即可发布!
-
追格小程序登录提示"授权失败"的解决办法近期追格小程序客户反馈,说追格小程序登录提示"授权失败",这种情况一般都是appid未设置导致,不妨按下面方式检查一下。
-
追格小程序用户隐私保护设置教程追格小程序是一个积木式小程序搭建框架,基于uniapp+WordPress开发的微信小程序,代码免费开源不加密且支持二开,安装追格相应扩展模块(模块支持按需购买),简单配置即可快速搭建不限于圈子社区、知识付费、活动报名、资讯等类型小程序。
-
追格小程序V1.8.5更新发布@好友模块与隐私协议接口追格小程序是一个积木式小程序搭建框架,基于uniapp+WordPress开发的微信小程序,代码免费开源不加密且支持二开,安装追格相应扩展模块(模块支持按需购买),简单配置即可快速搭建不限于圈子社区、知识付费、活动报名、资讯等类型小程序。
暂无评论,抢个沙发...