纯nvue项目如何设置百分百的高度

前端 0 5097

如果页面不需要滚动，可以在最外层的view加个style，flex: 1。

如果页面需要滚动，可以在每个nvue页面动态设置页面最小高度为窗口高度，具体方法如下：

第一步：
在main.js加入如下代码，将设置页面高度的方法全局挂载到uni对象上。
function setWindowHeight(page) {
setTimeout(() => {
uni.getSystemInfo({
success: res => {
page.window.height = res.windowHeight;
}
})
}, 100);
}
uni.$setWindowHeight = setWindowHeight;

第二步：
在页面最外层view写如下代码：

...
第三步：
data()方法加入这个页面高度变量：
data() {
return {
pageHeight： 0
}
}

第四步：
onLoad()方法调用设置页面高度方法：
onLoad() {
uni.$setWindowHeight(this);
}