vue+swiper实现列表无限滚动。css实现的列表无限滚动可能有显示问题，改用swiper实现。基于swiper3，vue2

swiper的最新版本已经到7.2了，但是老版本3、4用起来没啥问题，新版本安装遇到一些坑没解决。。
这里是版本3的详细配置手册的链接：Swiper3.x的全部配置选项、方法、函数

环境

vue2
[email protected]
[email protected]

安装依赖

注意是版本3

npm install swiper@3 --save-dev
npm install vue-awesome-swiper@3 --save-dev 

swiper在node文件夹的目录结构如下

引入swiper.min还是普通swiper都可

在main.js中引入

import {
    
    swiper, swiperSlide} from "vue-awesome-swiper";
import 'swiper/dist/js/swiper.min'

在使用swiper的页面的template中

<template>
    <div class="">
		<swiper :options="swiperOption" ref="mySwiper">
			<swiper-slide 
				v-for="(item,index) in data" 
				:key="index"> 
				//这里写滚动的每项内容
			</swiper-slide>
		</swiper>
	</div>
</template>

在使用swiper的页面的script中

import 'swiper/dist/css/swiper.min.css'
export default {
    
    
        data() {
    
    
            return {
    
    
                swiperOption: {
    
    
                    autoplay: 3000,
                    autoplayDisableOnInteraction: false,
                    direction: 'vertical',
                    centeredSlides: true,
                    // width: 100,
                    height: 150,
                    loop: true,
                    // loopedSlides:8,
                    loopAdditionalSlides: 8,
                    slidesPerView: 'auto',
                },
                data:[]
            }
        },
        components: {
    
    
            swiper,
            swiperSlide
        },
        computed: {
    
    
            swiper() {
    
    
                return this.$refs.mySwiper.swiper;
            }
        },
        mounted() {
    
    
            console.log("swiper", this.swiper);
        },

有空再详细的实现步骤