微信小程序——获取元素的宽高等属性

微信小程序里面无法像用jquery一样获取到元素的节点。小程序提供了一个wx.createSelectorQuery()来获取元素的相关信息。官方的文档对于它的用法都已经写的很详细了。

我直接上在项目中使用的代码吧~

先交待一下我的项目需求,看下图:

微信小程序——获取元素的宽高等属性

 

获取那块高度的原理很简单,就是页面的整体高度减去1,2,3的高度。

 

看下页面结构:

微信小程序——获取元素的宽高等属性

js具体代码如下:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabContHeight:300,
  },

  //计算高度
  getRect: function () {
    var _this = this;
  //我这里需要获取多个元素的高度,所以用的是selectAll wx.createSelectorQuery().selectAll(
‘.page-content, .video-box, .play-note, .tab-nav‘).boundingClientRect().exec(function(res){ _this.setData({ tabContHeight: res[0][0].height - res[0][1].height - res[0][2].height - res[0][3].height }) }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { //调用 计算高度 的方法 this.getRect(); } })

 

注意:需要把page和.page-content的height设置为100%,这样你返回的.page-content的高度才是你页面的整个高度。

我们要怎么获取其它的元素属性呢?我们可以先看一下js里面的res返回了一些什么数据,如下图所示:

微信小程序——获取元素的宽高等属性

所以如果我们要获取第2个元素的width,就通过 res[0][1].width就能得到啦~~

 

微信小程序——获取元素的宽高等属性

上一篇:微信小程序开发平台新功能「云开发」快速上手体验


下一篇:微信小程序中跳转另一个小程序