vue中使用swiper的方法以及动态加载图片不滑动的问题

话不多说，先贴出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不滑动的问题