项目中 JavaScript 框架 Swiper 中遇到的坑比问题

官方网址

官网链接直达

首先在项目首页H5中有使用到banner,自动滚动,如图所示

image.png

默认有4张图片,从后台取出数据之后,重新给这4张图片的src赋值.
赋值之后,发现第一张和最后一张怎么都不出来,开始以为是地址问题
好的,各种调试log ,发现地址没问题
或者获取的DOM 节点有问题?各种console ,还是问题
是对象的类型有问题?试着用js 原生对象 juqery 对象 angular js element 对象
试了都无果,实在是心累,不知道哪里的问题,把官网的API 翻了个遍,还是没找到问题

难道问题是出在布局上面?
来看看布局

image.png

swiper-container 下面除了4张图和页标之外还有这个,立马delete

调试,还是出不来.... 一口老血喷出...(这里确实有问题,但是不是图片的问题这个问题后面说)

是在不知道怎么办了.... 看看DOM 节点吧....在Chrome 中打开网页....

image.png

我去.老子当时是这个表情

image.png

居然有6个DIV ,我4张图居然给我生成了6个div ,恍然大悟,原来是swiper 内部为了循环滚动,多生成了两个div

仔细查看问题之后,重新赋值,问题解决.

image.png

再来看看另外一个问题,banner图片要点击,点击之后要跳转原生,来看看原来的代码

image.png

??? -0 +1 ...
switch 下面的代码除了index 一模一样......

于是把switch里面重复的代码提取出来,但是这个indexImg 得重新获取一下,心想这个框架肯定能直接能取到当前的activeIndex ,于是官网走一波

image.png

返回了个swiper对象,再去看看这个对象

activeIndex

这不是吗?马上使用这个对象,可是经过调试,index 根本不对...
第一张图的index 是2 ,意思就是从2开始的. 2,3,4,5
.........
开始以为是API使用问题,把官方的使用示例看了一遍没问题啊
查看DOM节点之后发现,在swiper-container 下面除了4张图和页标之外下面还有2个div,删除试试?这就是上面说的那个问题

删除之后索引正常.....

但是页面布局不敢提出来,要重新写布局,直接-2吧.修改之后的代码

image.png

总结:在JavaScript 中,问题无法得到解决的时候,需要使用chrome 调试工具,查看DOM 节点,从Dom 布局上来寻找一下问题

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,826评论 1 92
  • 参考文章:深度剖析:如何实现一个Virtual DOM 算法 作者:戴嘉华React中一个没人能解释清楚的问题——...
    waka阅读 6,002评论 0 21
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,488评论 0 44
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,814评论 0 8
  • 工作、生活中,常有人谈及如何才能成就一番事业之类的话题。就顺手读到的一些诗词估磨,不外乎有一点可以借鉴,那就是“功...
    宗林的李阅读 949评论 2 3