微信小程序中获取高度及设备的方法
由于js中可以采用操纵dom的方法来获取页面元素的高度,可是在微信小程序中不能操纵dom,经过查找之后发现仅仅只有以下几个方法可以获取到高度
wx.getSystemInfoSync().windowWidth // 获取当前窗口的宽度
wx.getSystemInfoSync().windowHeight // 获取当前窗口的高度
wx.getSystemInfoSync().model // 获取当前采用的设备
wx.getSystemInfoSync().pixelRatio
wx.getSystemInfoSync().language // 获取当前所采用的的语言
wx.getSystemInfoSync().version // 获取当前设备的版本
获取view等组件的高度等信息(获取节点信息)
//创建节点选择器
var query = wx.createSelectorQuery();
query.select('.list').boundingClientRect();
query.selectViewport().scrollOffset();
query.exec((res) => {
var listHeight = res[].height; // 获取list高度
});
res内容:

tips:
1、res[0]为当前节点的详细数据;
2、res[1]为显示区域的竖直滚动位置;
3、query.exec((res) => {})中的回调函数是最后执行的,若要获取高度等信息进行操作的话,要在回调函数中进行。
微信小程序中获取高度及设备的方法的更多相关文章
- 微信小程序中显示html富文本的方法
微信小程序中显示html富文本的方法 使用方法:git地址:https://github.com/icindy/wxParse 一.下载wxParse文件 二.在要引入的页面的js文件中,引入文件 j ...
- 开发微信小程序 中遇到的坑 及解决方法
1.wx.request 只能访问 https 解决: 新建项目 不填appid 即可访问 localhost 2.页面中多重三元表达式 解析有问题 解决: <!--{{index}} { ...
- 网页或微信小程序中使元素占满整个屏幕高度
在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情 ...
- 在微信小程序中,如何获取 for 循环的 index
微信小程序中,for 循环的 index(索引值)可以用wx:for-index="index"来获取. <view class="item" wx:fo ...
- 全栈开发工程师微信小程序-中(下)
全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...
- 微信小程序中的单位
vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%. vh:viewpoint height,视窗高度,1vh等于视窗高度的1%. rpx:rpx单位是微信小程序中css的尺寸单 ...
- 微信小程序中的iPhone X适配问题
微信小程序中的iPhone X适配问题 小程序中下方的导航会被iPhone X下面的那条黑线盖住[微笑脸],所以要专门为了iPhone X做样式上的适配[微笑脸] wx.getSystemInfo({ ...
- 微信小程序中事件
微信小程序中事件 一.常见的事件有 类型 触发条件 最低版本 touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断,如来电提醒,弹窗 ...
- 在微信小程序中绘制图表(part2)
本期大纲 1.确定纵坐标的范围并绘制 2.根据真实数据绘制折线 相关阅读:在微信小程序中绘制图表(part1)在微信小程序中绘制图表(part3) 关注我的 github 项目 查看完整代码. 确定纵 ...
随机推荐
- String,StringBuffer,StringBuilder效率优先关系说明
String,StringBuffer,StringBuilder效率优先关系说明: public class StringBufferWithStringBuilder { public stati ...
- BZOJ 1691 [Usaco2007 Dec]挑剔的美食家 multiset_排序_贪心
Description 与很多奶牛一样,Farmer John那群养尊处优的奶牛们对食物越来越挑剔,随便拿堆草就能打发她们午饭的日子自然是一去不返了.现在,Farmer John不得不去牧草专供商那里 ...
- php 常用header
//定义编码 header( 'Content-Type:text/html;charset=utf-8 '); //Atom header('Content-type: application/at ...
- maven构建本地jar包到本地仓库
maven命令: mvn:install:install-file -DgroupId=com.oracle -DartifactId=ojdbc6 -Dversion=1.0 -Dpackaging ...
- PHP实现并发请求
后端服务开发中经常会有并发请求的需求,比如你需要获取10家供应商的带宽数据(每个都提供不同的url),然后返回一个整合后的数据,你会怎么做呢? 在PHP中,最直观的做法foreach遍历urls,并保 ...
- 理解 Javascript 执行上下文和执行栈
如果你是一名 JavaScript 开发者,或者想要成为一名 JavaScript 开发者,那么你必须知道 JavaScript 程序内部的执行机制.理解执行上下文和执行栈同样有助于理解其他的 Jav ...
- C# try-catch-return
正常执行try后才能执行finally,catch中的语句可能会影响finally的执行 使用 finally 块,可以清理在 Try 中分配的任何资源,而且,即使在 try 块中发生异常,您也可以运 ...
- 鸟书shell 学习笔记(二) shell中正則表達式相关
通配符与正則表達式的差别 通配符是bash原生支持的语法,正則表達式是处理字符串的一种表示方式, 正則表達式须要支持的工具支持才干够 语系设置 : export LANG=C grep alias 设 ...
- 基于STM32的学习型通用红外遥控设备的设计实现(三)
CPU: STM32 调试平台: STM32F103ZET和STM32F103VBT 软件平台: Keil uVision4 电路设计: Altium Designer v6.9 http://blo ...
- Shell简单介绍
Shell是一种具备特殊功能的程序.它是介于使用者和linux 操作系统之核心程序(kernel)间的一个接口.为什么我们说 shell 是一种介于系统核心程序与使用者间的中介者呢?读过操作系统概论的 ...