vue 实现图片滚动

在Vue中实现图片滚动，可以通过几种不同的方法来完成，包括使用原生CSS、JavaScript以及现有的Vue组件库。这里提供一个基本示例，展示如何结合Vue和第三方库（如vue-seamless-scroll）来实现图片的左右滚动效果。

使用vue-seamless-scroll插件

1. 安装插件：
   首先，确保你已经安装了vue-seamless-scroll插件。如果未安装，可以通过npm或yarn进行安装：

   npm install vue-seamless-scroll --save
   # 或者
   yarn add vue-seamless-scroll
   

2. 引入插件：
   在你的Vue组件中引入vue-seamless-scroll：

   import VueSeamlessScroll from 'vue-seamless-scroll'
   Vue.use(VueSeamlessScroll)
   

3. 在模板中使用：
   然后在你的模板中配置和使用这个组件来实现图片滚动：

   <template>
     <div class="image-slider">
       <vue-seamless-scroll
         class="scroll-container"
         :data="partnerList"
         :class-option="optionLeft"
       >
         <ul>
           <li v-for="(item, index) in partnerList" :key="index">
             <img :src="item.imageUrl" alt="Image {{ index }}">
           </li>
         </ul>
       </vue-seamless-scroll>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         partnerList: [], // 这里应该填充你的图片数据
       };
     },
     computed: {
       optionLeft() {
         return {
           step: 0.5, // 调整滚动速度
           limitMoveNum: 1, // 开始滚动的数据量
           hoverStop: true, // 鼠标悬停时停止滚动
           direction: 2, // 左右滚动，2代表向左
           openWatch: true, // 监听数据变化自动更新
           singleWidth: 0, // 设置单步运动停止的宽度，默认为0表示连续滚动
           waitTime: 1000, // 单步运动停止的时间
         };
       },
     },
     methods: {
       // 这里可以添加获取图片数据的方法
     },
   };
   </script>
   
   <style scoped>
   /* 根据需要添加样式 */
   .image-slider {
     width: 100%;
     overflow: hidden;
   }
   .scroll-container {
     height: 100px; /* 请根据实际情况调整高度 */
   }
   ul {
     list-style-type: none;
     padding: 0;
     margin: 0;
     display: flex;
   }
   li {
     margin-right: 10px; /* 图片间的间距 */
   }
   img {
     width: 100px; /* 图片宽度，请按需调整 */
     height: auto;
   }
   </style>
   

这个示例展示了如何创建一个图片水平滚动的组件，其中partnerList是一个包含图片URL的对象数组。通过调整vue-seamless-scroll的属性，你可以控制滚动的方向、速度、是否在鼠标悬停时停止滚动等行为。记得根据实际需求调整样式和数据获取逻辑。