Vue-Swiper 实现竖向排列

1. 安装依赖

npm install swiper vue-awesome-swiper --save

2. main 引入依赖

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

Vue.use(VueAwesomeSwiper)

3. 在需要的地方使用

<template>
    <div class="wrap">
            <swiper ref="mySwiper" :options="swiperOptions">
                    <swiper-slide v-for="(item,index) in dataList" :key="index">
                        <div class="img_wrap">
                            <img :src='item.url'>
                        </div>
                    </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
    </div>
</template>

<script>
export default {
    name: 'carrousel',
    data() {
        return {
            swiperOptions: { // 设置你想要得排序效果，可以在swiper官网api文档查看更多
                direction: 'vertical', // vertical 设置成竖向排列
                height: window.innerHeight, // 每个 swiper-slide 的高度
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                }
                // Some Swiper option/callback...
            },
            dataList: [{
                title: "太空",
                url: require('../../public/IMG_0283.jpg')
            },{
                title: "卤肉面",
                url: require('../../public/IMG_4649.jpg')
            },{
                title: "长洲岛",
                url: require('../../public/IMG_0987.jpg')
            },{
                title: "披萨",
                url: require('../../public/IMG_3849.jpg')
            }]
        }
    },
    computed: {
        swiper(item) {
            return this.$refs.mySwiper.$swiper
        }
    },
    mounted() {
        this.swiper.slideTo(0, 1000, false)
    }
}
</script>

<style>
.wrap {    
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #eeeeee;
}
.img_wrap {
    height: 100%;
    background: antiquewhite;
}
.img_wrap img {
    height: 100%;
}
</style>

4. 版本(本次使用版本，安装最新版本容易出现BUG)

"swiper": "^6.7.0",
"vue-awesome-swiper": "^4.1.1"