vue+swiper实现列表无限滚动
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);
},
有空再详细的实现步骤