swiper简单使用

1、 实现静态组件的swiper效果

• 下载swiper

yarn add swiper@5.4.4

• 在组件中引入: js/css

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

• 模板页面: 修改层次结构和类名

<template>
    <!-- Swiper7的默认容器是'.swiper'，Swiper6之前是'.swiper-container' -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="./images/banner1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./images/banner2.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./images/banner3.jpg" alt="">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>

• 创建一个swiper对象并配置: 必须在轮播列表显示之后创建才有效 ==> 在mounted()中创建

mounted(){
    new Swiper ('.swiper-container', {
        direction: 'horizontal', //切换方向， 水平：horizontal，垂直：vertical
        loop: true, // 循环模式选项
        
        // 如果需要分页器
        pagination: {
        el: '.swiper-pagination',
        },
        
        //自动轮播
        autoplay:{
            delay: 3000,  //间隔时间
            disableOnInteraction:false, //用户操作swiper之后，是否禁止autoplay。默认为true：停止
        },
        
        // 如果需要前进后退按钮
        navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
        },
        
    })       
  },

可能遇到的问题

• 同一页面下多个轮播，同时生效，

解决办法

• 使用vue的ref技术，给需要轮播的元素添加ref标识，不会再影响到其它组件的轮播页面

<div class="swiper-container" ref="swiper">
...
new Swiper(this.$refs.swiper,{...})

3、使用vue-awesome-swiper

下载安装

• 下载vue-awesome-swiper
• 注意：使用vue-awesome-awiper，必须已经安装swiper，不会自动安装

yarn add vue-awesome-swiper@4.1.1 

创建文件并声明使用

• 创造文件src/plugins/swiper.js
• 记得在main中加载引入

swiper.js

/* 
    引入swiper相关的库
*/

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style
import 'swiper/css/swiper.css'

// 声明使用/安装插件  ===>  就能得到内部提供的一些特性（新的组件）
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

main.js

// 加载swiper配置
import '@/plugins/swiper'

模板中添加html内容

 <swiper ref="mySwiper" :options="swiperOptions" >
    <swiper-slide v-for="banner in banners" :key="banner.id">
        <img :src="banner.imgUrl" alt="">
    </swiper-slide>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination" slot="pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
</swiper>

在data中初始化Swiper配置。

 data(){
    return {
        swiperOptions:{
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            
            // 如果需要分页器
            pagination: {
            el: '.swiper-pagination',
            },
            //自动轮播
            autoplay:{
                delay: 3000,  //间隔时间
                disableOnInteraction:false, //用户操作swiper之后，是否禁止autoplay。默认为true：停止
            },
            
            // 如果需要前进后退按钮
            navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
            },
        }
    }
  },

完成。恭喜你，现在你的Swiper应该已经能正常切换了。