j***@163.com

发布：2019-08-22 09:40
更新：2023-07-04 13:49
阅读：7927

【报Bug】nvue页面flex布局不会自适应高度问题

分类：nvue

bug提交 bug反馈 nvue

重现步骤

[步骤]

一、

template：

<div class="box">  
    <div class="left"></div >  
    <div class="right"><text>发撒法撒旦发射点发射点发射点发射点发生反对发射点给发射点发射点发发射点发射点发发射点发顺丰法撒旦发射点发射点发法撒旦飞洒地方撒打发十分</text>  
    </div >  
</div >

style:

.box{flex-direction: row;}  
.left{width:100px;}  
.right{flex:1;}

以上布局及样式的效果为：
.right中的文本超出宽度后不会换行，一直在同一行显示并超出。此时box高度为一行文字高度

二、

在第一步的基础上更改right为:

.right{width:100px;}

然后right中的文本可以在100px位置换行，但是我想要自适应宽度的效果；此时box高度为正常情况下该段文字在100px宽度容器中撑起的高度

三、

在前两部基础上更改right样式为：

.right{width:100px;flex:1;}

此时，right元素可以正常自适应宽度，文本展示效果也是正常换行，但是此时box元素会被撑起一些多余的空白高度，经过我对比发现，这是的box高度和步骤二（只设置winth:100px;）的高度一致；也就是说宽度自适应了，但是高度没有（此处不确定是right高度没有自适应还是right撑起的box高度没有在right的宽度自适应之后自动缩回来）

这里说是box被撑起多余高度应该是因为我设置right的with为100px(小于自适应后的right宽度)。如果right的width设置为n(一个大于right自适应后宽度的数值)px时，box的高度应该是塌陷状态，及box高度小于right文本自适应宽度后应有的高度；所以这个box的高度问题，我感觉应该是页面加载时先按照100px（style中设定的width）渲染了right，right中的文本按100px的宽度正常撑起right和box的高度，然后再通过flex：1;属性去自适应right的宽度，文本又按照right自适应后的宽度进行重拍，但是这时的box或right的高度没有进行更新，导致的这个问题。不知道对不对，这是我的结论，仅供参考；

[结果]
我将第三步时的代码放在正常的html页面用浏览器打开后，并没有这样的问题，宽度高度都能自适应；

[期望]
期望第三步时的代码在nvue下和在h5中展示效果一样

IDE运行环境说明

HBuilderX

[IDE版本号]
2.2.1
windows10

uni-app运行环境说明

app

自定义组件模式

IOS 11.3

iphone7 plus

联系方式

[QQ]
1187875445

2019-08-22 09:40 负责人:DCloud_App_Array 分享

11 个回复

8***@qq.com

我也碰到了我是给父元素高度子元素高度100% 解决的，还有个问题 view 包 image view高度总是会多几像素

8***@qq.com

view 包 image view高度总是会多几像素给view 加上 flex 高度就正常了神奇

2019-12-14 16:44

t***@163.com - 80后

我设置100%也不管用！

<template>  
    <view v-if="newsItem.title" @click="click">  
        <view class="txbbody">  
            <view v-if="!newsItem.subject" class="cover">  
                <image class="img" :src="newsItem.thumb"></image>  
            </view>  

            <view class="body-txt">  
                <text v-if="newsItem.title" class="title">{{newsItem.title}}  
                </text>               
                <text v-if="newsItem.remark&&!newsItem.subject" class="remark">{{newsItem.remark}}  
                </text>   
                <text  v-if="newsItem.subject" class="subject" >{{newsItem.subject}}</text>  
            </view>  
        </view>  
        <view class="footer">  
            <view class="footer-duiqi">  
                <image style="height: 12px;width: 12px;" src="/static/icon/eye.png"></image>  
                <text class="footer-txt">50</text>  
            </view>  
            <view class="footer-duiqi">  
                <image style="height: 12px;width: 12px;" src="/static/icon/folder.png"></image>  
                <text class="footer-txt">{{newsItem.txbtype}}</text>  
            </view>  
            <view class="footer-duiqi">  
                <image style="height: 12px;width: 12px;" src="/static/icon/time.png"></image>  
                <text class="footer-txt">{{newsItem.addtime}}</text>  
            </view>  
        </view>  
        <view class="bottomline"></view>  

    </view>  
</template>  
<script>  
    export default {  
        props: {  
            newsItem: {  
                type: Object,  
                default: function(e) {  
                    return {}  
                }  
            }  
        },  
        methods: {  
            click() {  
                this.$emit('click');  
            }  
        }  
    }  
</script>  
<style scoped>  
    .txbbody {  
        flex: 1;  
        flex-direction: row;  
        justify-content: flex-start;  
        padding: 5px 5px;  
        height: 100%;  

    }  

    .bottomline {  
        flex: 1;  
        margin-left: 10px;  
        margin-right: 10px;  
        border-bottom-width: 1px;  
        border-bottom-color: #F2F2F2;  

    }  

    .img {  
        height: 34px;  
        width: 34px;  
        /* box-shadow: 0 0 5px #ccc; */  
    }  

    .cover {  
        flex-direction: row;  
        justify-content: center;  
        align-items: center;  
        width: 73px;  

    }  

    .body-txt {  
        flex:1;  
        flex-direction: column;  
        align-items: stretch;  
        height: 100%;  
        /* background-color: #AF4040; */  

    }  

    .title {  
        height: 20px;  
        line-height: 20px;  
        lines: 1;  
        padding: 3px;  
        margin-left: 10px;  
        margin-right: 10px;  
        font-size: 15px;  
        color: #555;  
        background-color: #528036;   
    }  

    .remark {  

        lines: 1;  
        text-overflow: ellipsis;  
        padding: 10px 10px 0px 10px;  
        font-size: 13px;  
        color: #919192;  
         background-color:#00B26A;   

    }  
    .subject {  
        flex:1;  
        text-overflow: ellipsis;  
        padding: 10px 10px 0px 10px;  
        font-size: 13px;  
        color: #919192;  
        height: 100%;  

    }  

    .footer {  
        flex: 1;  
        flex-direction: row;  
        justify-content: space-between;  
        height: 25px;  
         background-color: #A60000;   
        line-height: 25px;  
        padding: 5px 10px 0px 10px;  
        margin-left: 10px;  
        margin-right: 10px;  
    }  

    .footer-duiqi {  
        flex-direction: row;  
        justify-content: center;  
        align-items: center;  

    }  

    .footer-txt {  
        font-size: 10px;  
        height: 15px;  
        line-height: 15px;  
        padding-left: 5px;  
        color: #BDC3C7;  
    }  
</style>

2***@qq.com

请问你解决了吗？

2020-05-22 11:26

知否科技

2.6.15版本IDE也出现这种问题，高度没办法自适应。难道写nvue的人很少吗？

呆头

你解决了吗，我也遇到这情况、

2020-09-19 20:13

2***@qq.com

有人解决了吗？官方也不回答吗？

知否科技

我已经解决了：https://ask.dcloud.net.cn/question/95541

不写代码就狗带

有官方的人来出个解决方案吗?这个实在太不方便了,列表里的内容都不一样,不可能把高度定死的,但是又不能自适应高度,这怎么搞?

5***@qq.com

nvue 小程序和H5 flex布局下text可以自适应高度的但是app上不行我也是一样问题，所以只能用dom解决了判断app nvue环境下获取子text的dom对象获取高度再赋值父控件高度
非app nvue 环境就用条件编译默认写法就行下面专门针对app nvue环境

获取weex dom模块对象
// #ifdef APP-NVUE
const domModule = weex.requireModule('dom');
// #endif
2.给父组件style 高度变量height
3.子组件text 给个ref text
4.在mounted或onReady （若是网络请求或其他延迟情况再保证dom渲染完成情况下回调中执行下面操作）
mounted() {
this.$nextTick(() =>{
const r = this.$refs.text;
// #ifdef APP-NVUE
domModule.getComponentRect(r, option => {
this.height = option.size.height;
})
// #endif
})
},
不会排版将就看吧