uniapp小程序获取页面盒子高度

uniapp小程序获取盒子高度

第一步：

/**
 * system
 * uni方法配置
 */
const sysInfo = uni.getSystemInfoSync()
export default {
  data () {
    return {
      sysInfo,
      statusBarHeight: sysInfo.statusBarHeight,
      ios: /^iOS/g.test(sysInfo.system),
      brand: sysInfo.brand,
      circleRect: sysInfo.windowHeight !== sysInfo.safeArea.bottom
    }
  }
}
           

第二步：引入

我这里是用混入的方式，也可直接引入方法

第三步：使用

// 计算滚动容器高度
    __changeScrollHeight () {
      const query = uni.createSelectorQuery().in(this)
      query
        .select('.wb-header-wrap')  // 要计算高度的盒子的类名
        .boundingClientRect(data => {
          if (data) {
          // 需要的盒子高度  页面高度-data.height   .wb-header-wrap的高度
            this.scrollHeight =
              ((this.sysInfo.safeArea && this.sysInfo.safeArea.height) ||
                this.sysInfo.screenHeight) - data.height
          }
        })
        .exec()
    } 
           

使用rpx为单位的在应用this.scrollHeight时要用 px作为单位