300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 小程序中获取屏幕高度

小程序中获取屏幕高度

时间:2023-05-02 18:58:38

相关推荐

小程序中获取屏幕高度

屏幕高度问题

小程序中有时候需要获取屏幕高度使用,简单的通过wx.getSystemInfo即可获取到手机的系统信息

wx.getSystemInfo中有3个高度,分别是:

screenHeight:屏幕高度

windowHeight:窗口高度

statusBarHeight:状态栏高度

对于小程序来说屏幕的高度 = 状态栏高度 + 导航栏高度 + 窗口高度 + 标签栏高度,如下图所示:

小程序中获取屏幕高度及iPhoneX适配问题

所以我们想要获取窗口可使用高度时,在含有tabbar标签栏的页面中可以直接通过wx.getSystemInfo获取windowHeight来使用,使用方法:

app.js

App({onLaunch: function() {var that=this;// 获取屏幕高度wx.getSystemInfo({success: function(res) {that.globalData.windowHeight = res.windowHeight}})},globalData: {windowHeight: null,}})

index.js

var app = getApp()Page({data: {windowHeight: app.globalData.windowHeight,},})

index.wxml

<scroll-view scroll-y style='height:{{windowHeight}}px;'></scroll-view>

在不含有tabbar标签栏的页面中屏幕可使用高度的获取有两种方式

1、windowHeight窗口高度 + tabbar标签栏高度

2、screenHeight屏幕高度 - statusBarHeight状态栏高度 - 导航栏高度

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。