使用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;
}
}
此時(shí)，會(huì)發(fā)現(xiàn)div并沒有水平滑動(dòng)惋鹅，而是修改了item的寬度（將two-row的寬度均分給了item）蜂大。
解決方法
在item的內(nèi)部設(shè)置寬度扎狱，撐開被均分的div。
此時(shí)伟叛，將item變?yōu)閕tem-super私痹，內(nèi)部添加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;
}
}
}
