小程序中获取屏幕高度
屏幕高度问题
小程序中有时候需要获取屏幕高度使用,简单的通过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状态栏高度 - 导航栏高度
小程序中获取屏幕高度相关推荐
- 小程序中获取屏幕高度及iPhoneX适配问题
屏幕高度问题 小程序中有时候需要获取屏幕高度使用,简单的通过wx.getSystemInfo即可获取到手机的系统信息 wx.getSystemInfo中有3个高度,分别是: screenHeight: ...
- Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报 如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
- input层级高 小程序_获客、引流成本越来越高?开发小程序:低成本获客、引流...
在最近几年时间中,各行各业都有不少企业.商家反应:获客成本越来越高.对此,小编的建议是:去开发一个微信小程序.这是为什么?下面将让带着丰富小程序开发以及运营经验的,来自上海数字商圈的产品经理,给大家做 ...
- 微信小程序中用户登录和登录态维护
微信小程序和以前的web项目不同,他是前后端分离的应用,之前我们的传统登录有web服务器提供Session维护, 后端在返回结果给前端web项目时,带上cookie,且以cookie值为key存储用户 ...
- Canvas绘图在微信小程序中的应用:生成个性化海报 1
一.Canvas应用的背景(个人理解)及基础语法 背景 从2012年开始,微信那个时候用户的积累的量已经非常大了,推出公众号,当然大屏智能手机在那个时候也流行,传统的大众媒体逐步消亡,像微信公众号这样 ...
- 在微信小程序中动态的添加类名
在微信小程序中动态的添加类名 <view data-num="1" class="takeTaxi {{_num == 1 ? 'active' : ''}}&qu ...
- 小程序中所有组件学习
视图容器 view 视图容器 属性名 类型 默认值 说明 最低版本 hover-class String none 指定按下去的样式类.当 hover-class="none" 时 ...
- 微信小程序中IOS获取不到时间(年、月)
微信小程序中获取时间戳IOS不兼容 new Date("2017-06-16") 在IOS会出现NAN的情况所以对于时间转换需要另行封装,解决方案如下 把"-" ...
- 微信小程序中的tabBar设置
我们先来看一份图,这个设置在官方文档中已经写得很清楚了,我只是做一个总结 注:我写注释是为了方便说明,在小程序中的json文件中是不能用注释的 这个tabBar属于全局属性,因此就在全局配置文件app ...
最新文章
- arduino蓝牙通讯代码_「Arduino」OLED屏使用教程,显示内容听谁的?我不管,听我的...
- mybaits八:select查询返回map集合
- iphone悬浮球怎么设置_OPPO手机怎么截屏?大部分的人只会两种,包括你吗?
- Bootstrap:弹出框和提示框效果以及代码展示
- 文本处理工具--正则表达式
- RapidXml读取并修改XML文件
- 编译libpng和zlib
- oracle----globle temp table
- Shader+UGUI仿制Unity拾色器
- 油田大数据与创新之路的探究
- lgv50进入工程模式_LG手机工程模式进入方法及菜单指令翻译(适用G6、G7、V20、V30等)...
- VMware 虚拟化中:厚置备延迟置零、厚置备置零、Thin Provision三个的区别
- 微信大数据解析不一样的人生,你被戳中了吗……
- Java获取三个月的时间
- python控制电脑蜂鸣器
- SPA 的 SEO 方案对比、最终实践
- 编写一个布雷程序,在一个10*10的范围内随机布5-10颗雷,显示结果
- 休闲小趣一一数码照片修饰与处理
- Linux下用Samba作PDC配置方法
- Failed to start firewalld.service: Unit is masked