小程序页面高度计算,开发工具中都测试了一遍(二)升级版
发布于 5 年前 作者 oluo 2911 次浏览 来自 分享

先放图,写了离现在有几个月了

升级版,【*】logger我自己写的主要是打印自己格式的控制台信息

import LOGGER from './wxbm_logger.js';
const logger = new LOGGER.GetLogger('utils/wxbm_page');
//barPageHeight: 0, //有tarbar页面可用高度
//pageHeight: 0, //无tarbar页面可用高度
/**
 * hasbar 页面是否是tarbar页面
 * current 调用页面当前this对象
 * th 如果顶部需要一个头部,且此头部在scoll滚动体外面,这个高度就是头部高度
 * fh scoll滚动体在排除外部【比如th的头部后的高度】
 */
function currentSetPageHeight(hasbar, current, th, fh) {
  const app = getApp();
  const pageHeight = hasbar ? app.globalData.barPageHeight : app.globalData.pageHeight;
  if (pageHeight != 0) {
    //获取历史数据
    current.setData({
      containerHeight: pageHeight + "rpx",
      scrollHeight: (pageHeight - fh) + "rpx",
      maginTopHeight: th + "rpx"
    });
  } else {
    // 获取系统信息
    wx.getSystemInfo({
      success: res => {
        // 获取可使用窗口宽度、高度、比例
        let windowHeight = res.windowHeight;
        let windowWidth = res.windowWidth;
        let ratio = 750 / windowWidth;
        let pageWindowHeight = Math.ceil(windowHeight * ratio);
        if (hasbar) {
          app.globalData.barPageHeight = pageWindowHeight;
        } else {
          app.globalData.pageHeight = pageWindowHeight;
        }
        current.setData({
          containerHeight: pageWindowHeight + "rpx",
          scrollHeight: (pageWindowHeight - fh) + "rpx",
          maginTopHeight: th + "rpx"
        });
      },
      fail(error) {
        const reject_obj = {
          http: true,
          data: "获取系统信息异常"
        }
        logger.info(reject_obj, error);
      }
    })
  }
}
module.exports = {
  CurrentSetPageHeight: currentSetPageHeight
}

xxpage.js 这几个参数不一定用的到,可能就是一个最外层高度比较合适。

这个用法说实话就是在最外层高度计算出来后便把里面的也计算一下,可用可不用计算后的scroll、top等数据。有无tarbar你都不用管,计算的就是你可自由支配的可编辑区域高度,重写顶部胶囊的这个没考虑,太麻烦,完全不感动

app.js

回到顶部