vue 项目中使用 swiper 插件

vue 移动端网站的内容触摸滑动

在 vue 中如何引入 swiper

"swiper": "5.x",
"vue-awesome-swiper": "4.1.1",

配置

配置通 swiper 官网，api 链接

var swiperOption = {
  autoplay: true,
  speed: 300,
  effect: "fade", // 透明度轮播
  // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，<br data-filtered="filtered">假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
  notNextTick: true,
  // swiper configs 所有的配置同swiper官方api配置
  autoplay: true,
  speed: 1000,
  setWrapperSize: true,
  autoHeight: true,
  pagination: ".swiper-pagination",
  paginationClickable: true,
  mousewheelControl: true,
  observeParents: true,
  // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
  debugger: true,
  loop: true,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true
  }
};

slide 的切换效果

1. slide：普通切换、默认
2. fade：淡入
3. cube：方块
4. coverflow：3d 流
5. flip：3d 翻转

关于 swiper 在 vue 中的坑

swiper 的版本太高

swiper 的版本太高导致 vue 引入新版 vue-awesome-swiper 报错问题处理

This dependency was not found:
* swiper/...
To install it, you can run: npm install --save swiper

卸载已经安装的 swiper

{
  "swiper": "5.x",
  "vue-awesome-swiper": "4.1.1"
}

数据渲染轮播异常

使用静态数据时，页面可以正常滑动，一旦使用动态数据，页面就无法滑动，数据显示也不正常

var swiperOption = {
  // ...
  observer: true, //修改swiper自己或子元素时，自动初始化swiper
  observeParents: true //修改swiper的父元素时，自动初始化swiper
  // ...
};

observer

• 启动动态检查器(OB/观众/观看者)，当改变 swiper 的样式（例如隐藏/显示）或者修改 swiper 的子元素时，自动初始化 swiper。
• 默认 false，不开启，可以使用 update()方法更新。

css 样式、布局错乱

当图文结合实现轮播时，css 样式、布局错乱

循环 class 名 swiper-slide 的 div，之后再包裹一层 div，将内容放进去

<swiper class="swiper-no-swiping" ref="mySwiper" :options="swiperOptions">
  <swiper-slide v-for="(item, index) in adv.list" :key="item.id">
    <div class="slide-item"></div>
  </swiper-slide>
</swiper>

IE 浏览器不兼容 swiper4.0 版本

swiper4.0 版本不支持 IE 浏览器，这时候换成 swiper3.0.2 版本就可以了，当然相应的 api 也要有所修改

自动轮播

在实际项目里使用 autoplay：3000 并不能实现自动轮播的效果

{
  "autoplay": true
}