普通模式:(当前块-之前块)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才会被调用成功哒。