1***@qq.com
1***@qq.com
  • 发布:2023-03-18 13:39
  • 更新:2023-03-18 13:39
  • 阅读:187

【报Bug】HbuilderX3.7.7中对css语法中对flex布局显示错误的问题

分类:HBuilderX

产品分类: HbuilderX

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10 专业版

HBuilderX版本号: 3.7.7

示例代码:

<scroll-view class="more_srocll" :scroll-top="scrollTop"  scroll-y="true" show-scrollbar="false"  
                 :style="{height:idHeight+'rpx'}">  
            <view class="more_step_container">  
                <view class="m_st_cont" v-for="(item,index) in stepListShow" :key="index"  v-if="!item.isDeleted">  
                    <view class="m_st_c_left">  
                        <text class="m_st_c_index">{{index+1}}</text>  
                        <text class="m_st_c_name">{{item.productModeName}}</text>  
                    </view>  

                    <view class="m_st_c_right">  
                        <view class="m_st_c_tip_view" v-if="item.param[0].name == '上管温度'">  
                            <text class="m_st_c_tip" v-if="item.param[1].name == '下管温度'">{{item.param[0].value}}°C / {{item.param[1].value}}°C</text>  
                            <text class="m_st_c_tip" v-if="item.param[1].name != '下管温度'">{{item.param[0].value}}°C</text>  
                        </view>  
                        <view class="m_st_c_tip_view" v-if="item.param[0].name == '下管温度'">  
                            <text class="m_st_c_tip">{{item.param[0].value}}°C</text>  
                        </view>  
                        <text class="m_st_c_tip" v-if="item.param[0].name == '后管温度'">{{item.param[0].value}}°C</text>  
                        <text class="m_st_c_time" v-if="item.param[1].name == '时间'">{{item.param[1].value}}min</text>  
                        <text class="m_st_c_time" v-if="item.param[2] && item.param[2].name == '时间'">{{item.param[2].value}}min</text>  
                    </view>  
                    <view class="m_st_c_del" @click="delStep(index,item)" v-if="editStatus && !item.isDeleted">  
                        <image src="../../static/m_r_edit_step.png" class="m_st_c_img"></image>  
                    </view>  
                </view>  
            </view>  
        </scroll-view>  
</template>  

css部分  

<style lang="scss">  
.more_srocll{  
        /*height: 500px;*/  
        padding-bottom: 100px;  
        /*background-color: rgba(255,0,0,0.5);*/  
        // border-color: red;  
        // border-width: 1px;  
        // border-style: solid;  
    }  
    .m_st_cont{  
        flex-direction: row;  
        justify-content: space-between;  
        padding: 0 36rpx;  
        align-items: center;  
        background-color: #F0F0F0;  
        height: 96rpx;  
        border-radius: 50rpx;  
        margin-bottom: 40rpx;  
        .m_st_c_left{  
            width: 230rpx;  
            flex-direction: row;  
            justify-content: space-between;  
            align-items: center;  
            .m_st_c_index{  
                width: 50rpx;  
                color: #FD8100;  
                font-size: 26rpx;  
                font-weight: 400;  
            }  
            .m_st_c_name{  
                /*background: rgba(0,0,0,0.1);*/  
                width: 180rpx;  
                color: #FD8100;  
                font-size: 32rpx;  
                font-weight: bold;  
                text-align: center;  
            }  
        }  
        .m_st_c_right{  
            width: 350rpx;  
            flex-direction: row;  
            justify-content: space-between;  
            align-items: center;  
            .m_st_c_tip_view{  
                width: 180rpx;  
                flex-direction: row;  
                justify-content: space-between;  
                align-items: center;  
            }  
            .m_st_c_tip{  
                width: 180rpx;  
                /*background: rgba(0,0,0,0.1);*/  
                color: #343434;  
                font-size: 28rpx;  
                font-weight: 400;  
                text-align: center;  
            }  
            .m_st_c_time{  
                width: 150rpx;  
                /*background: rgba(0,0,0,0.1);*/  
                color: #343434;  
                font-size: 28rpx;  
                font-weight: 400;  
                text-align: center;  
            }  
        }  
    }  
</style>```

操作步骤:

CSS语法中的bug。怀疑是flex布局的问题

.m_st_c_right{  
            width: 350rpx;  
            flex-direction: row;  
            justify-content: space-between;  
            align-items: center;  
            .m_st_c_tip_view{  
                width: 180rpx;  
                flex-direction: row;  
                justify-content: space-between;  
                align-items: center;  
            }  
            .m_st_c_tip{  
                width: 180rpx;  
                /*background: rgba(0,0,0,0.1);*/  
                color: #343434;  
                font-size: 28rpx;  
                font-weight: 400;  
                text-align: center;  
            }  
            .m_st_c_time{  
                width: 150rpx;  
                /*background: rgba(0,0,0,0.1);*/  
                color: #343434;  
                font-size: 28rpx;  
                font-weight: 400;  
                text-align: center;  
            }  
        }

预期结果:

图片中的右图是正常的,中间是有温度显示的。安装包如下
海氏烘焙2312_0318114318 的是HbuilderX3.6.18打包的

实际结果:

图片中的左图是不正常的,中间是空的。安装包如下
海氏烘焙2312_0318_1133 的是HbuilderX3.7.7打包的

bug描述:

使用HbuilderX3.7.7打包的安卓包中间一栏不显示。同样的代码,使用HbuilderX3.6.18打包的安卓包就没有问题。
目前怀疑是HbuilderX3.7.7中对css语法中flex布局显示错误的问题。但是这个问题还未确定,还需验证

2023-03-18 13:39 负责人:DCloud前端团队 分享
已邀请:

要回复问题请先登录注册