数组数据组装
0
悬赏园豆：100
[已解决问题]
浏览: 78次
解决于 2024-01-09 16:40
卡车动态向右移动，全程划分100格，一格为1%，k35和k121都处于35%那格，有没有办法让它们位置相同的卡车不要堆起来，让它们平行并排？
前端HTML：
<div class="truck" v-for="(num, inx) in 100" :key="inx">
<div v-for="(empty, index) in arraData.emptyList" :key="index">
<div v-if="Number(empty.percentage) >= inx && Number(empty.percentage) <= (inx + 1)">
<div class="carNumber">{{ empty.name }}</div>
<img class="emptyImg" src="../../assets/dispatch/kuangche-null.png" />
</div>
</div>
</div>
后端接口数据：
let arraData = {
emptyList: [
{
name: 'k35',
percentage: '35%'
},
{
name: 'k121',
percentage: '35%'
}
],
heavyList: []
}
客户想要的结果
最佳答案
0
卡车的位置是根据其百分比位置进行放置的，但是在当前的设计中，如果两辆卡车的位置百分比相同，它们会堆叠在一起。为了让它们平行并排，可以使用CSS grid 或 flexbox。
首先，修改HTML来创建一个grid或flex容器：
<div class="truck-container" v-for="(num, inx) in 100" :key="inx">
<div v-for="(empty, index) in arraData.emptyList" :key="index">
<div v-if="Number(empty.percentage) >= inx && Number(empty.percentage) <= (inx + 1)">
<div class="carNumber">{{ empty.name }}</div>
<img class="emptyImg" src="../../assets/dispatch/kuangche-null.png" />
</div>
</div>
</div>
然后，在CSS中，可以定义truck-container为一个grid或flex容器。例如，下面是一个使用grid的示例：
.truck-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
上述代码将.truck-container定义为一个grid容器，并且为每个子元素（也就是每辆卡车）设置了最小宽度为200px，同时自动调整列数以适应屏幕大小，列与列之间的间隙为10px。
或者，如果你更倾向于使用flexbox，下面是一个使用flexbox的示例：
.truck-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.truck-container被定义为一个flex容器，可根据屏幕宽度自动换行，且各个子元素（即每辆卡车）之间的空间平均分配。
以上两种方式都可以实现让百分比相同的卡车平行并排，而不会堆叠在一起。
收获园豆：100
