由于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) => {})中的回调函数是最后执行的,若要获取高度等信息进行操作的话,要在回调函数中进行。

微信小程序中获取高度及设备的方法的更多相关文章

  1. 微信小程序中显示html富文本的方法

    微信小程序中显示html富文本的方法 使用方法:git地址:https://github.com/icindy/wxParse 一.下载wxParse文件 二.在要引入的页面的js文件中,引入文件 j ...

  2. 开发微信小程序 中遇到的坑 及解决方法

    1.wx.request 只能访问 https 解决: 新建项目  不填appid  即可访问 localhost 2.页面中多重三元表达式  解析有问题 解决: <!--{{index}} { ...

  3. 网页或微信小程序中使元素占满整个屏幕高度

    在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情 ...

  4. 在微信小程序中,如何获取 for 循环的 index

    微信小程序中,for 循环的 index(索引值)可以用wx:for-index="index"来获取. <view class="item" wx:fo ...

  5. 全栈开发工程师微信小程序-中(下)

    全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...

  6. 微信小程序中的单位

    vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%. vh:viewpoint height,视窗高度,1vh等于视窗高度的1%. rpx:rpx单位是微信小程序中css的尺寸单 ...

  7. 微信小程序中的iPhone X适配问题

    微信小程序中的iPhone X适配问题 小程序中下方的导航会被iPhone X下面的那条黑线盖住[微笑脸],所以要专门为了iPhone X做样式上的适配[微笑脸] wx.getSystemInfo({ ...

  8. 微信小程序中事件

    微信小程序中事件 一.常见的事件有 类型 触发条件 最低版本 touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断,如来电提醒,弹窗 ...

  9. 在微信小程序中绘制图表(part2)

    本期大纲 1.确定纵坐标的范围并绘制 2.根据真实数据绘制折线 相关阅读:在微信小程序中绘制图表(part1)在微信小程序中绘制图表(part3) 关注我的 github 项目 查看完整代码. 确定纵 ...

随机推荐

  1. py2exe打包OpenCV,找不到libiomp5md.dll

    问题:py2exe打包OpenCV,找不到libiomp5md.dll 解决方法:把 libiomp5md.dll 从numpy/core/ 里面复制到 python27/DLLS/文件夹!!!

  2. 三维重建:Kinect几何映射-SDK景深数据处理

    此文大量使用XML,非C类的代码,看看图即可. 原文链接:Kinect for Windows SDK开发入门(五):景深数据处理 3. 对物体进行测量 像上篇文章中对深度值测量原理进行讨论的那样,像 ...

  3. .bat 打开程序

    为什么要用.bat打开程序. 因为一个一个难得点 怎么做 百度的,start 程序路径\程序 改进 点击bat,不显示dos窗口. 新建.vbs文件 Set shell = Wscript.creat ...

  4. RabbitMQ学习之队列监控

    对于RabbitMQ的监控,除了服务器基本信息(硬盘.CPU.内存.IO等)以及MQ的进程和端口,我们也可以通过请求url访问管理API监控其集群和队列的情况.在Javaapi 3.6.0以后,cha ...

  5. 任务调度开源框架Quartz概述

    任务调度开源框架Quartz 几乎每个项目中都用到了自动任务处理功能.所以在任务调度的功能很常用,但是一个好的任务调度程序是一个颇具挑战性的工作.最近用到Quartz这个框架,感觉很好,所以进行学习. ...

  6. Docker镜像的备份和恢复

    备份: docker save -o [tar包真实路径] [镜像名 ] 如:docker save -o /usr/docker_data/mongo-backup.tar mongo   导出: ...

  7. vue 动态添加路由 require.context()

    之前的写法 'use strict' import Vue from 'vue' import MessageBroadcast from 'page/MessageBroadcast' import ...

  8. vue开发基本步骤

    1      安装node.js 安装node.js之前,先进行nvm的安装: https://github.com/coreybutler/nvm-windows/releases最好选择稳定版本 ...

  9. 训练1-N

    给出N个整数,对着N个整数进行排序 Input 第1行:整数的数量N(1 <= N <= 50000)第2 - N + 1行:待排序的整数(-10^9 <= Ai <= 10^ ...

  10. [codeforce 975C] Valhalla Siege (二分)

    Examples input 5 5 1 2 1 2 1 3 10 1 1 1 output 3 5 4 4 3 input 4 4 1 2 3 4 9 1 10 6 output 1 4 4 1 N ...