# Vue

# 旧版

# 下载依赖包

npm install swiper

# 在轮播组件中引入 swiper 和其 css

import Swiper from "swiper";
import 'swiper/css/swiper.css';

# 设置轮播的位置以及容器

<div class="swiper-container" ref="swiper" id="mySwiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in banners" :key="item.id">
            <img :src="item.imageUrl" style="width: 100%; height: 435px" />
        </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

# 创建 Swiper 实例

原则上一个 Swiper 实例只控制一个轮播图,而且 Swiper 实例一定要在界面显示后再创建,不然无法控制图片轮播

// 数据更新后,先同步调用 watch 的回调,最后异步更新界面
watch: { //watch 监视轮播图片数据是否异步请求回来了
    banners() {
        this.$nextTick(() => { //nextTick 会在界面完成更新之后才执行指定的回调
            var mySwiper = new Swiper(this.$refs.swiper, { // 用 vue 的 ref 来隔离各个轮播图,防止一个 swiper 实例控制多个轮播图
                //direction: "vertical", // 垂直切换选项
                loop: true, // 循环模式选项
                autoplay: {
                    delay: 2000,
                    disableOnInteraction: false,
                },
                // 如果需要分页器
                pagination: {
                    el: ".swiper-pagination",
                },
                // 如果需要前进后退按钮
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                // 如果需要滚动条
                scrollbar: {
                    el: ".swiper-scrollbar",
                },
            });
        });
    },
},

# 新版

使用 vue-awesome-swiper 制作轮播图。

# 安装

npm install swiper
npm install vue-awesome-swiper

# 定义 swiper.js 文件并注册该组件

定义好 swiper.js 文件方便模块化管理插件

// swiper.js
import Vue from 'vue';
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
Vue.use(VueAwesomeSwiper);

# 在 vue 工程的 main.js 中引入

// main.js
import './swiper.js';

# 使用

// 轮播组件 tempalte部分
<swiper :options="{
          loop: true, // 循环模式选项
          autoplay: {
            delay: 2000,
            disableOnInteraction: false,
          },
          // 如果需要分页器
          pagination: {
            el: ".swiper-pagination",
            clickable:true
          },
          // 如果需要前进后退按钮
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
      	}" 
       class="swiper"
       ref="swiper"
       id="mySwiper">
    <swiper-slide v-for="item in banners" :key="item.id">
        <img :src="item.imageUrl" style="width:100%;heigth:435px" />
    </swiper-slide>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <div calss="swiper-pagination" slot="pagination"></div>
</swiper>