详解: vue 项目采用 swiper 实现自动轮播

实现效果

实现步骤

1. 在vue项目src/tools文件夹下放置swiper 下载包
   

2. 在需要使用的 vue 组件中， 采用 import 方式引入 swiper 文件

   // 引入swiper
   import Swiper from '@/tools/swiper.min.js'
   import '@/tools/swiper.min.css'
   

3. HTML 数据渲染部分

   <div id="topNav" class="swiper-container">
     <div class="swiper-wrapper hot-topic-cntr">
     // 数据存放在 list
       <div
         class="swiper-slide"
         v-for="v in list"
         :key="v.topicId"
         @click="() => openTopic(v)"
       >
         <div class="hot-topic-item">
           <div class="item-pic">
             // 图片懒加载
             <img :data-src="v.image.thumbUrl" class="image-box swiper-lazy" />
             <div class="swiper-lazy-preloader"></div>
             ...
           </div>
         </div>
       </div>
     </div>
     // 左箭头。如果放置在swiper-container外面，需要自定义样式。
     <div class="swiper-button-prev"></div>
     // 右箭头。如果放置在swiper-container外面，需要自定义样式。    
     <div class="swiper-button-next"></div>
   </div>
   

4. JS 页面交互实现部分

   mounted() {
     // 从后台请求过来的数据
     getDataList().then((list) => {
       this.list = list
       setTimeout(() => {
         // 创建 Swiper 对象
         var mySwiper = new Swiper('.swiper-container', {
           loop: true,
           speed: 600,
           slidesPerView: '3',
           spaceBetween: 21,
           preventClicksPropagation: false, //阻止默认事件
           observer: true, //修改swiper自己或子元素时，自动初始化swiper
           observeParents: true, //修改swiper的父元素时，自动初始化swiper
           autoplay: {
             delay: 3000, //3秒切换一次
             pauseOnMouseEnter: true, //悬停停止切换
           },
           lazy: {
             loadPrevNext: true,
             loadPrevNextAmount: 2,
           },
           navigation: {
             nextEl: '.swiper-button-next',
             prevEl: '.swiper-button-prev',
           },
         })
       })
     })
   },
   

5. swiper 样式

   .swiper-container {
     /* --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
     --swiper-preloader-color: rgb(229, 229, 229); /* 单独设置预加载圆圈的颜色 */
     --swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
     --swiper-navigation-size: 30px;/* 设置按钮大小 */
   }
   .swiper-slide {
     width: 386px;
     /*设为固定值*/
   }
   

6. 全部代码

   <template>
   <div id="topNav" class="swiper-container">
     <div class="swiper-wrapper hot-topic-cntr">
       // 数据存放在 list
       <div
         class="swiper-slide"
         v-for="v in list"
         :key="v.topicId"
         @click="() => openTopic(v)"
       >
         <div class="hot-topic-item">
           <div class="item-pic">
             // 图片懒加载
             <img :data-src="v.image.thumbUrl" class="image-box swiper-lazy" />
             <div class="swiper-lazy-preloader"></div>
             ...
           </div>
         </div>
       </div>
     </div>
     // 左箭头。如果放置在swiper-container外面，需要自定义样式。
     <div class="swiper-button-prev"></div>
     // 右箭头。如果放置在swiper-container外面，需要自定义样式。    
     <div class="swiper-button-next"></div>
   </div>
   </template>
   
   <script>
   import Swiper from '@/tools/swiper.min.js'
   import '@/tools/swiper.min.css'
   
   export default {
     mounted() {
     	  // 从后台请求过来的数据
   	  getDataList().then((list) => {
   	    this.list = list
   	    setTimeout(() => {
   	      // 创建 Swiper 对象
   	      var mySwiper = new Swiper('.swiper-container', {
   	        loop: true,
   	        speed: 600,
   	        slidesPerView: '3',
   	        spaceBetween: 21,
   	        preventClicksPropagation: false, //阻止默认事件
   	        observer: true, //修改swiper自己或子元素时，自动初始化swiper
   	        observeParents: true, //修改swiper的父元素时，自动初始化swiper
   	        autoplay: {
   	          delay: 3000, //3秒切换一次
   	          pauseOnMouseEnter: true, //悬停停止切换
   	        },
   	        lazy: {
   	          loadPrevNext: true,
   	          loadPrevNextAmount: 2,
   	        },
   	        navigation: {
   	          nextEl: '.swiper-button-next',
   	          prevEl: '.swiper-button-prev',
   	        },
   	      })
   	    })
   	  })
     },
     data: () => ({
       list: [],
     }),
   }
   </script>
   
   <style lang="scss" scoped>
   .swiper-container {
     /* --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
     --swiper-preloader-color: rgb(229, 229, 229); /* 单独设置预加载圆圈的颜色 */
     --swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
     --swiper-navigation-size: 30px;/* 设置按钮大小 */
   }
   .swiper-slide {
     width: 386px;
     /*设为固定值*/
   }
   </style>
   
   

参考文献

• swiper 官网
• 记录swiper3.x版本loop为true轮播踩坑，附带解决方案