微信小程序中获取高度及设备的方法
由于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 项目 查看完整代码. 确定纵 ...
随机推荐
- poj 2955 Brackets 【 区间dp 】
话说这题自己折腾好久还是没有推出转移的公式来啊------------------ 只想出了dp[i][j]表示i到j的最大括号匹配的数目--ค(TㅅT)------------------- 后来搜 ...
- C# indexof 注意
- 阿里云API网关!
API 网关(API Gateway)提供高性能.高可用的 API 托管服务,帮助用户对外开放其部署在 ECS.容器服务等阿里云产品上的应用,提供完整的 API 发布.管理.维护生命周期管理.用户只需 ...
- 【路飞学城Day170】算法小结
Evernote Export 算法的思想是能省则省,内存能少则少,时间运行能少尽量少 堆排序的时间复杂度O(nlogn) 堆排序的内置模块heapq 常用函数 heapify(x) heappush ...
- 【BZOJ3451】Tyvj1953 Normal - 点分治+FFT
题目来源:NOI2019模拟测试赛(七) 非原题面,题意有略微区别 题意: 吐槽: 心态崩了. 好不容易场上想出一题正解,写了三个小时结果写了个假的点分治,卡成$O(n^2)$ 我退役吧. 题解: 原 ...
- P3369 【模板】普通平衡树 (splay 模板)
题目描述 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作: 插入x数 删除x数(若有多个相同的数,因只删除一个) 查询x数的排名(排名定义为比当前数小的数的个数+1.若有多 ...
- php 安装mysql扩展注意事项
1.yum search php-mysql (Linux环境) 这一点,根据具体的情况会遇到不同的搜索结果.我搜索到的结果是:php-mysql.i386 : A module for PHP ap ...
- Python半双工聊天
半双工聊天 半双工聊天.创建一个简单的半双工聊天程序.指定半双工,我们的意思就是,当建立一个连接且服务开始后,只有一个人能打字,而另一个参与者在得到输入消息提示之前必须等待消息.并且,一旦发送者发送了 ...
- 洛谷 P1137 旅行计划 (拓扑排序+dp)
在DAG中,拓扑排序可以确定dp的顺序 把图的信息转化到一个拓扑序上 注意转移的时候要用边转移 这道题的dp是用刷表法 #include<bits/stdc++.h> #define RE ...
- 实战:一、使用mongo做一个注册的小demo
思路:1.使用mongoose 进行 数据库的链接 2.使用Schema来进行传输字段的定义 3.安装koa-router进行数据处理4.安装koa-bodyparser 进行post数据交互5.解决 ...