话不多说,先贴出vue中使用swiper的方法
1- 终端安装包
npm install swiper
2- 引入包
import Swiper from "swiper"
3- html部分的代码
<--html-->
<template>
<div id="banner">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in bannerlist" :key="index">
<--这里的key是我随便定义的数组的index / 你可以按需自行修改-->
< img :src="item.img" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</template>
4- js部分的代码
<script>
import Swiper from "swiper";
import http from "../../utils/http";
export default {
name: "banner",
data() {
return {
bannerlist: [] //用来存放动态加载的轮播图的数据
};
},
async mounted() {
//配置Swiper 建议关于Swiper配置方面可以前往Swiper官网
let res = await http.get("你自己的接口路径");
//这里用到的http.get是在下自己写的一个小方法,你可以换成ajax / fetch什么的
this.bannerlist = res //bannerList 数组
new Swiper(".swiper-container", { //swiper再mounted中进行初始化
//具体设置参加swiper官网api,这里是就是把自己随便设置的部分贴上来了
pagination: {
el: ".swiper-pagination"
},
loop: true,
autoplay: {
delay: 4000,
stopOnLastSlide: false,
disableOnInteraction: false
},
observeParents:false, //注意这里!!
observer:true, //也要注意这里!!
});
}
}
</script>
5- 关于动态加载的问题处理。
如果你有读上面贴出来的代码,就会发现两个“注意这里”,这两句话的配置就是使得swiper监视子元素的变化,即你引入图片的src的变化情况。(即便不是图片,其他元素也是同理)
由此就可以解决动态加载数据的时候,swiper不滑动
的问题