安装Swiper
- 官方API文档:中文api - Swiper中文网
npm install swiper
导入
//在main.js 引入样式
import "swiper/dist/css/swiper.min.css" //可能会报错
组件中使用
- 轮播图片固定情况
- 设置容器:所有的
swiper
属性只有在swiper
容器内才能发挥作用swiper-container
- 在设置容器时,需要绑定类名
swiper-container
,在新建swiper
对象时,也同时需要获取到容器类名。因此可以在绑定容器固定类名后,再为不同的容器设置不同的类名或id
,并创建不同的对象,以此来达到在一个容器中使用多个swiper
轮播图的效果。
<template>
<div class="container">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background: #00ffff">
<img src="../../static/images/index/item3.jpg" />
</div>
<div class="swiper-slide" style="background: #006666">
<img src="../../static/images/index/item2.jpg" />
</div>
<div class="swiper-slide" style="background: #006666">
<img src="../../static/images/index/item1.jpg" />
</div>
<div class="swiper-slide" style="background: #006666">
<img src="../../static/images/index/item4.jpg" />
</div>
<div class="swiper-slide" style="background: #006666">
<img src="../../static/images/index/item5.jpg" />
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
</div>
</template>
<script>
//版本问题 需要单独引入Autoplay
import Swiper, { Autoplay } from "swiper";
Swiper.use([Autoplay]);
export default {
data() {
return {};
},
methods: {},
mounted() {
//Swiper初始化
new Swiper(".swiper-container", {
loop: true,
// 如果需要分页器
pagination: ".swiper-pagination",
// 如果需要前进后退按钮
nextButton: ".swiper-button-next",
prevButton: ".swiper-button-prev",
// 如果需要滚动条
scrollbar: ".swiper-scrollbar",
//自动轮播
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
});
},
created() {},
};
</script>
<style scoped ></style>
-
异步请求拿到图片情况
<template> <div class="banner" v-show="isShowSlide"> <div class="swiper-banner"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(item, index) in swiperList" :key="index" > <img src="images//img_loading.jpg" :data-src="item.imgpath" class="swiper-lazy" style="width: 100%; height: 100%" /> </div> </div> <!-- 开启分页 --> <div class="swiper-pagination" v-if="swiperList.length > 1"> <span v-for="(item, index) in swiperList"></span> </div> </div> </div> </template> <script> import Swiper, { Autoplay } from "swiper"; Swiper.use([Autoplay]); export default { data() { return {}; }, methods: { getImgs: function () { //created中调用 let _this = this; _this.axios .get("请求链接") .then(function (res) { if (res.status === 200 && res.data.result === "0") { const data = res.data.message.list; for (let i in data) { _this.swiperList.push(data[i]); } _this.swiperLength = _this.swiperList.length; _this.$nextTick(function () { if (_this.swiperLength > 0) { _this.isShowSlide = true; if (_this.swiperLength == 1) { _this.isAutoplay = 0; _this.isLoop = false; } else { _this.isAutoplay = 3000; _this.isLoop = true; } _this.mySwiper = new Swiper(".swiper-banner", { autoplay: _this.isAutoplay, loop: _this.isLoop, autoplayDisableOnInteraction: false, preventLinksPropagation: false, lazyLoading: true, //懒加载开启 pagination: ".swiper-pagination", observer: true, //修改swiper自己或子元素时,自动初始化swiper observeParents: true, //修改swiper的父元素时,自动初始化swiper }); } else { _this.isShowSlide = false; } }); } else { _this.isShowSlide = false; } }) .catch(function (err) { console.log(err); }); }, }, mounted() {}, created() { this.getImgs(); }, }; </script> <style scoped ></style>