使用flex水平布局
<div class="two-row">
<div class="item" v-for="(item, index) in seckill.secKillSkuDetail" :key="index">
<home-item :name = "item.skuName" :amount="item.salePrice" :imgName="getImageUrl(item.skuId)"></home-item>
</div>
</div>
.two-row{
margin-top: 0.1rem;
width: calc(100% - 0.2rem);
height: auto;
display:flex;
flex-wrap:nowrap;
overflow-x:scroll;
flex-direction: row;
.item{
margin-left: 0.2rem;
margin-top: 0rem;
margin-bottom: 0.1rem;
width: 25vw;
height: 30vw;
}
}
此时，会发现div并没有水平滑动，而是修改了item的宽度（将two-row的宽度均分给了item）。
解决方法
在item的内部设置宽度，撑开被均分的div。
此时，将item变为item-super，内部添加item元素
<div class="two-row">
<div class="item-super" v-for="(item, index) in seckill.secKillSkuDetail" :key="index">
<div class="item" >
<home-item :name = "item.skuName" :amount="item.salePrice" :imgName="getImageUrl(item.skuId)"></home-item>
</div>
</div>
</div>
.two-row{
margin-top: 0.1rem;
width: calc(100% - 0.2rem);
height: auto;
display:flex;
flex-wrap:nowrap;
overflow-x:scroll;
flex-direction: row;
.item-super{
margin-left: 0.2rem;
margin-top: 0rem;
margin-bottom: 0.1rem;
width: 25vw;
height: 30vw;
.item{
width: 25vw;
height: 30vw;
}
}
}
