评论

小程序页面高度计算,开发工具中都测试了一遍

自己打造一个计算页面布局高度的api

app.js onLaunch

// 获取系统信息
wx.getSystemInfo({
success: res => {
// 获取可使用窗口宽度、高度、比例
let windowHeight = res.windowHeight;
let windowWidth = res.windowWidth;
let ratio = 750 / windowWidth;
let pageWindowHeight = Math.ceil(windowHeight * ratio);
that.globalData.barPageHeight = pageWindowHeight;
},
fail(err) {
console.log(“获取系统信息失败”, err);
}
})

globalData

globalData: {
barPageHeight: 0,
pageHeight: 0
}

和globalData并列的globalWithOutBarHeight

globalWithOutBarHeight: function(hasbar,current, th,fh) {
const that = this;
const pageHeight = hasbar ? that.globalData.barPageHeight:that.globalData.pageHeight;
if (pageHeight != 0) {
console.log(“获取历史数据”, hasbar, pageHeight, (pageHeight - fh))
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){
that.globalData.barPageHeight = pageWindowHeight;
}else{
that.globalData.pageHeight = pageWindowHeight;
}
current.setData({
containerHeight: pageWindowHeight + “rpx”,
scrollHeight: (pageWindowHeight - fh)+ “rpx”,
maginTopHeight: th + “rpx”
});
console.log(“计算数据”, hasbar, pageWindowHeight, (pageWindowHeight - fh))
},
fail(err) {
console.log(“获取系统信息失败”, err);
}
})
}
}

页面使用

data

containerHeight: 0, //默认最外层高度
scrollHeight: 0, //scroll高度,计算得到
maginTopHeight: 0, //顶部灰色距离

onLoad

const that = this;
//页面布局高度,rpx为单位
app.globalWithOutBarHeight(true,that, 20, 0);

参数说明

hasbar 在tarBar页面
current 用来更新当前页面data数据的,如上面的data
th 貌似我没有使用,抱歉,但不影响使用
fh 一个页面自定义顶部tab的话就是这个高度了,主体内容为scroll-view组件显示,那么整个页面高度减去fh就是scroll-view高度了,简单不,这思路,由于获取信息耗时操作,所以我优化了你看有“获取历史数据”的那部分代码

最后一次编辑于  07-24  
点赞 0
收藏
评论

1 个评论

  • 少年啦
    少年啦
    07-27

    你想表达什么 windowHeight是可操作区域不包括状态栏 screenHeight是整个屏幕的高度 自定义的话screenHeight减去statusBarHeight加上自定义头就可以

    07-27
    赞同
    回复 3
    • 祝先生你好
      祝先生你好
      07-29
      设置了tarBar,其他页面是没有tarBar那个高度的,所以还是得在普通页面计算一遍。
      07-29
      回复
    • 祝先生你好
      祝先生你好
      07-29
      问一下你开发时优先使用wepy 框架吗,那个https://tencent.github.io/wepy/
      07-29
      回复
    • 少年啦
      少年啦
      07-29
      这框架用的人少 好久不更新 我用uni-app
      07-29
      回复