<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>```
- 发布:2023-03-18 13:39
- 更新:2023-03-18 13:39
- 阅读:192
产品分类: HbuilderX
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10 专业版
HBuilderX版本号: 3.7.7
示例代码:
操作步骤:
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;
}
}
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_0318114318 的是HbuilderX3.6.18打包的
实际结果:
图片中的左图是不正常的,中间是空的。安装包如下
海氏烘焙2312_0318_1133 的是HbuilderX3.7.7打包的
图片中的左图是不正常的,中间是空的。安装包如下
海氏烘焙2312_0318_1133 的是HbuilderX3.7.7打包的
bug描述:
使用HbuilderX3.7.7打包的安卓包中间一栏不显示。同样的代码,使用HbuilderX3.6.18打包的安卓包就没有问题。
目前怀疑是HbuilderX3.7.7中对css语法中flex布局显示错误的问题。但是这个问题还未确定,还需验证