偶遇vue-awesome-swiper的坑

小说:打字兼职接单平台官方作者:平道马海更新时间:2019-01-17字数:98042

偶遇vue-awesome-swiper的坑


最近用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!

当前文章:http://leetaemin.cn/list_12908.html

发布时间:2019-01-17 15:18:56

宁波集士港属于哪个区 淘宝店铺授权怎么弄 淘宝秒杀验证码识别 违章查询官方网站 优惠券佣金高 晚上7点到9点是什么时辰 2018下班兼职跑滴滴赚钱吗 57折返利网如何赚钱 昌邑兼职2018 电脑写小说赚钱的网站

81437 12934 10455 93063 34073 7639680789 23189 30431

我要说两句: (0人参与)

发布