Nuxt 中使用 Swiper5

由于swiper各个大版本之间差别较大，这里配合 Nuxt 使用 Swiper5 vue-awesome-swiper4.1.1

安装 swiper vue-awesome-swiper

npm install swiper@5.4.5
npm install vue-awesome-swiper4.1.1

创建 /plugins/swiper.js

import Vue from 'vue';
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/css/swiper.css'
import 'swiper/css/swiper.min.css'

Vue.use(VueAwesomeSwiper)

在 nuxt.config.js 添加 swiper.js

plugins: [
     ... ...
     {
        src: '@/plugins/swiper.js',
        ssr: false
    }
]

使用

<template>
    <div class="box">
        <swiper
            ref="swiper"
            :options="swiperOption"
            @slideChange="slideChange">
            <swiper-slide>
                1
            </swiper-slide>
            <swiper-slide>
                2
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>
<script>
export default {
    layout: "*name*",
    data() {
        return {
            // 当前 swiper-slide 的下标
            activeIndex: 0,
            swiperOption: {
                speed: 100,
                // 纵向
                direction: "vertical",
                // 允许鼠标滚动
                mousewheel: true,
                grabCursor: true,
                //分页器
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
            },
        };
    },
    methods: {
        slideChange() {
            this.activeIndex = this.$refs.swiper.$swiper.activeIndex;
        },
        slideTo(index){
          this.$refs.swiper.$swiper.slideTo(index)
        }
    },
};
</script>

获取当前 slide index

this.$refs.swiper.$swiper.activeIndex

跳转到指定 slide

this.$refs.swiper.$swiper.slideTo(index)