最近用 vue 重构一个移动端的项目, 碰到了不少坑, 今天拿移动端最著名的轮播插件 swiper 为例来说, 由于这个项目没用 UI 库, 纯手写的样式, 沿用老的插件, 自然而然的选择了 vue-awesome-swiper(3.1.3) 最新版, 记不清上次用这个插件多久了, 现在用来竟遇到很多坑, 今晚闲暇以此记录, 帮助大家避免踩坑.
1. 轮播图不轮播
这个原因有很多, 首先要检查样式 swiper.CSS 是否正确的引进来了, 其次是最容易被忽略的也是这次最主要的原因, 最新版的 vue-awesome-swiper 是基于 swiper4, 有很多配置 option 已经变了, 最为明显的就是原来的 key-value 格式 autoplay: true, 现在已经变成了下面这样的 json 格式:
- autoplay:{
- enabled: true,
- disableOnInteraction: false,
- delay: 3000
- },
- pagination: {
- el: '.pagination'
- }
下图为证:
官网上的图
配置好以后应该是可以轮播了, 还有就是 SPA 如果不是多个轮播的话没必要全局引这个,
- import VueAwesomeSwiper from 'vue-awesome-swiper';
- import 'swiper/dist/css/swiper.css';
- Vue.use(VueAwesomeSwiper);
只需要在封装好的轮播组件内引入以下这个就够了.
- import { swiper, swiperSlide } from 'vue-awesome-swiper';
- import 'swiper/dist/css/swiper.css'
2. 分页器 pagination 没出现
这个的话其一就是因为上面提到的配置 option 格式变了, 其二是需要在 pagination 的 div 盒子里增加 slot="pagination" 用来分发, 这两个都没问题的话应该就 OK 了.
3. 轮播第二次开始后第一张图一闪而过
这个问题困扰了我好久, 百度了很久也没找到有用的线索, 今天早上去了公司心里想这个问题必须解决啊, 要不体验也太差了, 所以直接 Google 一下吧, 第一个答案就是 vue-awesome-swiper 的 GitHub 上的 issue, 一看原来早已有人遇到了类似的问题, 作者给出的解释是由于 vue 特殊的渲染机制导致数据没有完全返回时 swiper 已经初始化了, 现在解决的方法是加 v-if="data.length", 保证数据完全返回了才开始渲染 swiper, 这样总算是解决了, 体验马上好极啦! 之前由于英文不好所以一般有问题都是百度, 最近发现同事有问题都是 Google, 今日一试果然是快准狠, 以后要充分的利用好 Google 和 StackOverFlow, 提升效率不是一点半点哈!
4. resize() 方法报错 undefined
这个问题也是因为 swiper4 已经把 resize 变为一个 object, 它包含两个方法, 我用了它的 resizeHandler() 方法, 这样就 OK 了.
技术在不断进步, 插件在不断更新, 以后遇到问题一定要先看原文档, 解决问题多借助 Google!
来源: https://www.cnblogs.com/lewiscutey/p/8719596.html