swiper.js中怎么获取滑动前后的位移值?

JavaScript09

swiper.js中怎么获取滑动前后的位移值?,第1张

普通模式:(当前块-之前块)x宽度

move=(mySwiper.activeIndex-mySwiper.previousIndex)*mySwiper.width 。

free模式:现在第一块的相对swiper位置-滑动之前位置

onFirstInit: function(swiper){

location1=mySwiper.slides[0].getOffset().left

}

其他事件{

location2=mySwiper.slides[0].getOffset().left

move=location2-location1-mySwiper.positions.start

}

swiper是个功能插件,使用在移动端,相当于jm,jq是javascript的框架库,主用于平台兼容,应用在比如连版广告等需要滑动操作的地方,局限性比较小。

由于项目是从基于谷歌浏览器改版成基于IE浏览器,所以项目中基本上是以jQuery来控制DOM,其中遇到了使用数组的push和jQuery的html方法来动态生成页面(主要是一个个运单),页面中引用了swiper,再通过循环生成后台数据所反的相对应个数的slider,但是发现在页面载入后,组件并没有生效,后来终于通过一系列搜索找到了解决的方法,也是痴呆了TAT。

<section>标签中就是装的动态生成的内容。

这里是生成所有订单的方法,其中涉及到swiper的push方法在相关图片注释处。

接下来初始化swiper,然后在请求后台数据成功后的回调函数调用fullOrder方法

结果发现swiper根本没有被调用到,默默的mark一下,在图片多的情况下判断swiper是否成功初始化看左右按钮的颜色是否一深一浅就知道了。

正确初始化swiper的方法应该是在fullOrder方法之后或者是在fullOrder里的element.html()之后。由于swiper是需要 先初始化再执行 ,但这里是先生成swiper, 所以需要在生成swiper之后再初始化

只有这样在页面加载完后swiper才会被调用成功哒。