在一个 Vue 项目中使用的，npm 的 swiper 插件，遇到了一些坑，记录一下填坑过程。
首先，npm 安装 Swiper ：
代码语言：javascript复制npm install swiper --save-dev引入 Swiper ：我是在 main.js 中添加如下代码：
代码语言：javascript复制import Swiper from "swiper"
@import "swiper/dist/css/swiper.css";//样式文件使用 Swiper ：
代码语言：javascript复制<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要翻页按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>初始化 Swiper ：
代码语言：javascript复制var mySwiper = new Swiper(".notice-swiper", {
direction: 'vertical',//垂直滚动
speed: 400,//过渡时间
loop: true,//循环
autoplay: {
delay: 5000,//自动滚动|时间
},
});遇到的问题：
1、使用静态数据时，一切正常， Swiper 可以正常滚动和滑动。但是使用动态数据时，会出现不能自动滚动/播放甚至数据显示不正常的现象。
解决办法：添加一个 observer 属性。
observer 属性：为 true 时，Swiper 会启用 Mutation Observer 模式，每当元素的样式更改或子元素变动（增加/删除）时都会刷新（重新初始化）Swiper。
var mySwiper = new Swiper(".notice-swiper", {
direction: 'vertical',//垂直滚动
speed: 400,//过渡时间
loop: true,//循环
observer: true,
autoplay: {
delay: 5000,//自动滚动|时间
},
});2、使用 v-if 条件让 Swiper 动态显示时，界面混乱，无法切换等问题。
解决办法：添加 observeParents 属性。
observeParents 属性：将 observe 应用于 Swiper 的父元素。当 Swiper 的父元素变化时，例如 window.resize，Swiper 就会更新。
var mySwiper = new Swiper(".notice-swiper", {
direction: 'vertical',//垂直滚动
speed: 400,//过渡时间
loop: true,//循环
observer: true,
observeParents: true,
autoplay: {
delay: 5000,//自动滚动|时间
},
});3、使用 v-for 循环和 v-if 条件控制 Swiper 的数量时， loop 属性不生效，自动播放到最后一个后停止，不能循环播放。
可能的原因： v-for 循环和 v-if 条件渲染还没有完成，Swiper 就被初始化了。这样就会导致 Swiper 错乱，功能异常。
解决办法：将 Swiper 放在 $nextTick 下一个 UI 帧再初始化。
Vue.nextTick 用于延迟执行一段代码。Vue 的官方文档详细解释：
Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的 Promise.then 和MessageChannel，如果执行环境不支持，会采用 setTimeout(fn, 0)代替。
例如，当你设置vm.someData = 'new value'，该组件不会立即重新渲染。当刷新队列时，组件会在事件循环队列清空时的下一个“tick”更新。多数情况我们不需要关心这个过程，但是如果你想在 DOM 状态更新后做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。
代码语言：javascript复制this.$nextTick(() => { // 下一个UI帧再初始化swiper
this._initSwiper()
});如果需要在数据请求结束后执行，可以这样写：
代码语言：javascript复制getList().then(res => {
if (res.data.code == 0) {
this.$nextTick(() => { // 下一个UI帧再初始化swiper
this._initSwiper()
});
}
})这样基本可以解决 Swiper 不能自动/循环播放的问题了。
本文主要整理了 swiper不能循环播放，swiper不能自动播放，swiper初始化，npm swiper相关问题，swiper loop不生效，swiper autoplay不生效等问题，希望对你有所帮助。
