June__
June__
  • 发布:2019-10-12 21:22
  • 更新:2021-06-13 16:01
  • 阅读:6563

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

分类:uni-app

100vh的就别说了- -

2019-10-12 21:22 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

onload获取设备高度然后赋值给样式

DCloud_UNI_HDX

DCloud_UNI_HDX

flex: 1 可充满屏幕高度,使用 flex: 1 2 3... 设置百分比

  • objcat

    如果是两行呢 每行4等分 在nvue上要怎么实现

    2020-06-04 10:59

  • DCloud_UNI_HDX

    回复 objcat: 参考 html flex 布局

    2020-06-05 10:50

  • objcat

    回复 DCloud_UNI_HDX: 参考也无法实现, 你们的nvue并不是完美的flex, 其中百分比就不支持, 所以相当于你们对多行布局的支持几乎为0, 只能写两个单行的, 确实可以, 但是数据处理会十分麻烦, 我已经向你们提出这个问题了, 请查阅 https://ask.dcloud.net.cn/question/98408

    2020-06-05 13:53

June__

June__ (作者)

是不是大家都用uniapp模式,还是是我的问题

一路踩坑到永远

一路踩坑到永远

我想知道作者怎么解决的

酱饭

酱饭

如果页面不需要滚动,可以在最外层的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);
}

要回复问题请先登录注册