微信小程序全面屏适配

开发微信小程序中，遇到iPhone全面屏手机，底部小黑条会遮挡页面底部，因此需要做适配处理。

解决方案：使用wx.getSystemInfoSync()中的screenHeight和safeArea对象的bottom属性判断

screenHeight是获取屏幕的高度，因为bottom是以屏幕左上角为原点开始计算的，所以需要的是屏幕高度。

safeArea对象的bottom属性是安全区域右下角纵坐标。

screenHeight减去safeArea对象的bottom属性，则是底部小黑条的高度。

获取底部小黑条的高度,全局存储使用。

app.js的onLaunch函数：

wx.getSystemInfo({
　　success: res => {
　　　　this.globalData.bottomHeight = res.screenHeight - res.safeArea.bottom;
　　},
　　fail(err) {
　　　　console.log(err);
　　}
})

在所需页面的js文件从全局变量中获取：

onLoad: function (options) {

this.setData({
　　　　bottomHeight : app.globalData.bottomHeight
　　})

}

在所需页面的wxml里面使用：

<view class="page" style="padding-bottom:{{bottomHeight }}px"></view>

微信小程序全面屏适配相关推荐

微信小程序全面屏适配
最近在做小程序,说实话小程序的坑我才刚踩.今天做了一个关于小程序自定义navigator的功能,不废话,先上图通过配置app.json的window属性的navigationStyle(导航栏样式, ...
微信小程序全面屏的适配
通过配置app.json的window属性的navigationStyle(导航栏样式,仅支持以下值: default 默认样式custom 自定义导航栏,只保留右上角胶囊按钮),改为custom模式 ...
angularjs全栈开发知乎_1-4【微信小程序全栈开发课程】原生小程序框架介绍
1.打开小程序目录打开微信开发者工具,我们上一节新建的项目,我圈出来的这个地方就是小程序的目录结构(如果你那里没有显示,可以点击左上方的编辑器来显示) 2.原生小程序框架介绍给大家画了一张图,重要 ...
为啥我的页面模板的from提交不了数据_4-9【微信小程序全栈开发课程】意见反馈（四）--提交反馈信息
1.创建后端操作文件先在后端server/controllers文件夹中创建操作文件createopinion.js,用来将从前端页面提交的数据,插入到opinions表中,创建完之后,页面目录如下 ...
上拉加载更多后台数据_6-7【微信小程序全栈开发课程】记录页面（七）--分页加载记录数据...
现在是一次性加载所有的记录数据,数据多的时候,会加载比较慢,所以我们改成分页加载,一次最多加载15条数据每次拉倒底部都会自动加载下一页的数据,知道所有的数据加载完成 1.添加data变量编辑rec ...
eslint不报错 vue_2-2【微信小程序全栈开发课程】index页面搭建--ESlint格式错误
1.修改入口文件也就是src/pages/index/main.js文件 main.js是入口文件,通过main.js来加载index.vue文件.每个页面文件夹中都要有main.js文件 //加载 ...
微信小程序全屏背景图
微信小程序全屏背景图,解决你在设置过程中出现的多次背景图重复出现的问题 wxml <view class="container" style="height: {{ ...
3.2【微信小程序全栈开发课程】登录功能（一）--实现登录功能
在本地搭建好后端环境之后,我们来实现登录功能 1.安装SDK插件 SDK插件用来获取用户的openId SDK是server端(也就是后端)的插件,帮助我们很容易的获取openId.openId是微信 ...
微信小程序全选，微信小程序checkbox，微信小程序购物车
微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选设计思路: 一.从网络上传入以下Json数据格式的数组 1.标题titl ...

微信小程序全面屏适配

微信小程序全面屏适配相关推荐

最新文章

热门文章