代码如下:
主要的css:
.car-list-container{
margin-top: 100rpx;
height: 100%;
background-color: #FFF;
border-radius: 25rpx 25rpx 0rpx 0rpx;
display: flex;
flex-direction: column;
font-size: 36rpx;
}
.car-head{
width: 100%;
height: 100rpx;
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;
font-weight: bold;
position: relative;
}
.car-title{
width: 100%;
height: 100rpx;
line-height: 100rpx;
border-bottom: #999 solid 1rpx;
}
.car-body{
display: flex;
flex-direction: column;
padding-right: 30rpx;
padding-bottom: 100rpx;
flex: 1;
}
.car-list{
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding-right: 30rpx;
padding-bottom: 30rpx;
flex: 1;
}
car-body的padding-bottom 如果没有设置底部的控件会被遮挡:
如果padding-bottom设置成与car-list-container margin-top一样的100rpx,则显示正常。