微信小程序中获取高度及设备的方法

最新推荐文章于 2024-10-15 13:51:21 发布

转载最新推荐文章于 2024-10-15 13:51:21 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaoyaoxingchen/p/8819880.html

文章标签：

#javascript #游戏 #ViewUI

本文介绍了在微信小程序中获取视图组件高度的方法，包括使用wx.getSystemInfoSync获取窗口尺寸，以及通过createSelectorQuery选择器查询特定组件的布局信息。文章提供了具体代码示例，展示了如何在回调函数中获取和利用组件高度。

由于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[0].height; // 获取list高度
  })；