使用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;
                }
           }
        }