12.图片滑动

<div class="wrapper">
   <div class="container">
      <img src="src/assets/logo.png" alt="">
      <img src="src/assets/logo.png" alt="">
      <img src="src/assets/logo.png" alt="">
      <img src="src/assets/logo.png" alt="">
      <img src="src/assets/logo.png" alt="">
      <img src="src/assets/logo.png" alt="">
    </div>
 </div>

//css样式
<style>
        .wrapper{
            overflow-x: auto;
            overflow-y: hidden;
            border: 1px solid #333;
        }
        img{
            width: 250px;
        }
        /* 去掉滚动条，但是在移动端上划不动 */
        /* .wrapper::-webkit-scrollbar{
            display: none;
        } */
        .container{
            display: grid;
            grid-template-columns:repeat(5,250px) ;   //5:分成5份
            gap:10px;    //间隔
        }
    </style>

列题:

<div class="picWalls">
   <div v-for="datas of data.clips" :key="datas">
       <img :src="datas.small" alt="">
   </div>
</div>
//css样式
.picWalls{
  overflow-x: auto;
  overflow-y: hidden;
  display: grid;
  grid-template-columns: repeat(5, 150px);
  gap: 20px;
}
.picWalls img{
  width: 150px;
  height: 80px;
}