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

【报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前端团队 分享
已邀请:

要回复问题请先登录注册