在Vue中使用Swiper插件

在Vue中使用Swiper插件

Swiper是比较常见的轮播图插件，但版本比较多，原生和Vue的使用方法有差异，使用起来有一点不知所措

参考资料

官方教程：surmon-china/vue-awesome-swiper: 🏆 Swiper component for @vuejs (github.com)

参考视频：[【Vue - Swiper】最简单明了的Swiper教程重投]_哔哩哔哩_bilibili

API使用文档： 中文api - Swiper中文网

视频踩坑：

建议安装Swipeer4，即@3.1.3，可直接对照4-6版本的中文文档使用；视频中安装Swiper3，但仍对照4-6版本文档使用有所不妥。

实测可用版本

基于Vue 2.6； Cli 4

步骤总结：

• 安裝Swiper 7 npm i swiper

• 安裝vue插件npm install swiper vue-awesome-swiper@3.1.3 --save

• 全局main.js引入

• 新建轮播图组件swiper.vue，通过props从父组件中获取数据，v-for生成轮播图

• 参考4-6版本的中文文档，在data中使用使用API

  ---

使用时踩坑

• 踩坑：轮播图显示后出现很想滚动条，即轮播图内容占据了比窗口更大的空间

  解决：设置.swiper-container的样式为overflow: hidden;

• 踩坑：自动轮播时，手动滚动后自动轮播失效

  解决：autoplay对象中添加disableOnInteraction: false,

• 踩坑：记录错误：Custom elements in iteration require ‘v-bind:key’ directives. - 简书 (jianshu.com)

• 踩坑：axios请求的图片使得loop失效

  解决：(1条消息) 解决vue中使用swiper无法自动循环播放问题_踩到我裙子了的博客-CSDN博客

  swiper轮播 loop:true失效的原因 - 简书 (jianshu.com)

  需要设置observer:true和observeParents:true，并设置v-if="banners.length"在数据加载完成后再生成swiper