[JavaScript知识库]Vue中使用swiper轮播图组件实现详解过程

对比swiper3版本，我觉得swiper4版本更方便一些，所以此文依托的是vue2+swiper4版本（不同版本命令不同，参考官网）。关于swiper7版本我个人是还没有使用。

• npm i swiper@4 --save 安装swiper
• npm uninstall swiper 卸载swiper

html部分结构
一定要严格按照标准来！！

<!-- （第1层/最外层）盒子，class一定要有一个swiper-container -->
<div class="test-swiper swiper-container">
 <!-- （第2层）盒子，class为swiper-wrapper;用于存放所有分页内容 -->
  <div class="swiper-wrapper">
   <!-- （第3层）盒子，class为swiper-slide;用于存放 单个 分页内容 -->
    <div class="swiper-slide">
       <!-- （第4层）盒子，class为swiper-zoom-container;用于控制里面的img缩放属性；如果这里不添加图片会被异常拉伸（具体问题没有找），所以推荐使用 -->
      <div class="swiper-zoom-container">
        <!-- （第5层）放置img -->
        <img src="./assets/swiper-images/banner-fade-1.jpg" />
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-zoom-container">
        <img src="./assets/swiper-images/banner-fade-2.jpg" />
      </div>
    </div>
  </div>
  
  <!-- （属于第2层位置），class为swiper-button-next; 存放下一个页面的箭头 -->
  <div class="swiper-button-next">
    <!-- 存放字体文件的（本例中使用的是本地字体图标） -->
    <i class="iconfont icon-forward"></i>
  </div>
  <!-- （属于第2层位置），class为swiper-button-prev; 存放上一个页面的箭头 -->
  <div class="swiper-button-prev">
    <i class="iconfont icon-back"></i>
  </div>
  <!-- （属于第2层位置），class为swiper-pagination; 存放分页（下方小圆点）按钮的 -->
  <div class="swiper-pagination"></div>
</div>

vue部分

<script>
// 引入swiper
import Swiper from "swiper";
// 引入样式
import "swiper/dist/css/swiper.min.css";
// 引入本地字体图标
import "./assets/swiper-iconfont/iconfont.css";

export default {
  name: "App",
  // 挂载完成后
  mounted() {
    var mySwiper = new Swiper(".swiper-container", {
      loop: true, // 循环模式
      effect: "fade", // 渐现动画
      // zoom: true, // 控制缩放（需要配合html使用）

	  // 自动轮播
      autoplay: {
        delay: 2000, // 2秒切换一次
        disableOnInteraction: false, // 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
      },
      
	  // 控制分页按钮
      pagination: {
        el: ".swiper-pagination",
        // dynamicBullets: true, // 动态分页器，当你的slide很多时，开启后，分页器小点的数量会部分隐藏。
        clickable: true, // 此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。

		// 带数字的分页器（需要配合CSS使用，在CSS中会提到）
        renderBullet: function (index, className) {
          return '<span class="' + className + '">' + (index + 1) + "</span>";
        },
      },
	  
	  // 左右（前后）切换箭头
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });

	// 鼠标进入时
    mySwiper.el.onmouseover = function () {
      // 鼠标放上暂停轮播
      mySwiper.autoplay.stop();
      // 显示出前进后退按钮
      mySwiper.navigation.$nextEl.css("display", "block");
      mySwiper.navigation.$prevEl.css("display", "block");
    };
    // 鼠标移出后
    mySwiper.el.onmouseleave = function () {
      mySwiper.autoplay.start();
      mySwiper.navigation.$nextEl.css("display", "none");
      mySwiper.navigation.$prevEl.css("display", "none");
    };
  },
};
</script>

CSS部分(less写法)

/* 初始化盒子的大小（定义一个宽度即可） */
.test-swiper {
  border: 1px solid red;
  margin: 380px auto;
  width: 580px;
  /* 处理按钮显示 */
  .swiper-button-next,
  .swiper-button-prev {
    /* 初始化开始状态为不显示 */
    display: none;
    /* 给个 任意背景色 清除原来的样式 */
    background: rgb(175, 173, 173);
    opacity: 0.8;
    border-radius: 5px;
    
    /* 处理字体图标居中 */
    text-align: center;
    line-height: 2.8em;

    .iconfont {
      font-size: 30px;
      color: white;
    }
  }

  .swiper-pagination {
    /* 带数字的分页器，按钮若显示序号，则在这里处理 */
    .swiper-pagination-bullet {
      width: 21px;
      height: 21px;
    }
  }
}