官网和百度的教程总是出错，应该是版本的原因，官网里的总是搞出错，所以我这边只用swiper4版本
命令行下输入 npm install swiper@4 --save安装
这里有一个坑，如果是git管理下的项目，需要在项目文件夹下打开git bash here
输入 npm install swiper@4 --save安装
swiper组件部分代码
<template>
<div class="swiper-container filmswiper">
<div class="swiper-wrapper">
<slot></slot>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
</template>
<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
export default {
mounted() {
new Swiper(".filmswiper", {
autoplay: {
delay: 2000,
//用户操作swiper之后，是否禁止autoplay。默认为true：停止，目前改为不停止
disableOnInteraction: false,
},
loop: true,
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
},
};
</script>
<style scoped>
/* 可以通过swiper里的类修改默认样式，目前修改的是小圆点的位置 */
.swiper-pagination{
text-align: right;
}
</style>
其他组件需要引用swiper时的代码
注意此处我用的反向代理跨域请求的数据渲染
<myswiper :key="data_list.length">
<div class="swiper-slide" v-for="list in data_list" :key="list.id">
<img :src="list.img" />
</div>
</myswiper>
<script>
import myswiper from "@/components/Swiper";
import axios from "axios";
export default {
name: "NowPlaying",
data() {
return {
data_list: [],
};
},
components: { myswiper },
mounted() {
axios.get("/hotel/mustTry?city=nanjing").then((res) => {
this.data_list = res.data.data;
});
},
};
</script>