1、下载依赖(不带版本号会缺少文件)
npm install [email protected] --save
2、main.js 引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
3、在单页面中使用
<template>
<div>
<swiper ref="mySwiper" class="swiperbox" :options="swiperOption">
<swiper-slide class="swiper-slide" v-for="image in data" :key="image.id">
<img style="width: 100vw" :src="image.image" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
data() {
return {
data: null,
swiperOption: {
//分页
pagination: ".swiper-pagination",
//点击切换
paginationClickable: true,
//自动播放时间
autoplay: 3000,
//切换速度
speed: 1000,
loop: true,
//用户操作swiper之后,是否禁止autoplay.默认为true:停止。
autoplayDisableOnInteraction: false,
//拖动释放时不会输出信息,阻止click冒泡。拖动Swiper时阻止click事件。
preventLinksPropagation: true,
},
};
},
mounted() {
let url = "api/index/getIndexBannerList";
this.axios.get(url).then((res) => {
this.data = res.data.data;
// console.log(this.data);
});
},
};