注册登录

西洛西洛

西洛西洛

发布：2020-07-02 10:35
更新：2020-07-02 17:42
阅读：2339

uni-app flex 划分为上中下三块在h5端和app端展示效果不同

分类：uni-app

uniapp

【问题】，使用flex做页面的上中下布局，在h5端显示正常，但在app端中间区域高度不能自适应

跟布局有段的代码

.walk {  
    display: flex;  
    flex-direction: column;  
    height: 100%;  
    justify-content: space-between;  

       /* 上 */  
       .mtop ， .mbottom {  
        flex: none;  
       ｝  
       /* 中 */  
      .mbody {  
        flex: auto;  
      ｝  
}

效果截图

h5

app

十分感谢。

2020-07-02 10:35 负责人:无分享

2 个回复

西洛西洛

西洛西洛 (作者)

把 .walk 的高度改成 100vh后，在 app 能够正常的显示，但是 h5 会超出部分，应该是 h5 的 100vh 把标题栏也给计算进去了，但 app 却没有计算这一个标题。本来是想着偷懒的，emmm。。。。。

gftttrrtrt4

page 设置高度100%了吗

2020-07-02 11:24
西洛西洛 (作者)

回复 gftttrrtrt4: 设置了的

2020-07-02 11:25
gftttrrtrt4

回复西洛西洛: page部分没有scoped吧，有scoped在app上不生效

2020-07-02 11:34
西洛西洛 (作者)

回复 gftttrrtrt4: 我刚才试了下，有没有scoped，用100%在app上中间都撑不开。

2020-07-02 14:36

渡 - 性感前端在线炒粉一份8块

建议通过js计算赋值

西洛西洛 (作者)

emm。。。。本来选择css就是想着偷懒下，没想到踩坑里了。

2020-07-02 17:45
渡

回复西洛西洛: 看你页面下面应该还有附加栏所以js是最好的选择

2020-07-02 17:47
西洛西洛 (作者)

然后能麻烦帮我看下我的另一个问题吗？我刚发了贴，感谢。

2020-07-02 17:47

该问题目前已经被锁定, 无法添加新回复