今天遇到一个需求就是去修改使用swiper的一个页面,原来的功能是在移动端要滑动很长一段距离才会翻页,现在要去修改这个滑动距离,让滑动看起来更灵敏。
2018-03-29_164753.png
因为是去看别人写的代码,还真是有点费时间。
开始是先去找的初始化swiper参数,看有没有相关的设置,
touchRatio
触摸距离与slide滑动距离的比率。
threshold
拖动的临界值(单位为px),如果触摸距离小于该值滑块不会被拖动。
但是发现初始化的参数中并没有相关设置,于是在一个上拉刷新和下拉加载的例子中发现了mySwiper.translate,获取wrapper的位移。于是才找到了原因,因为有一页内容超过了一屏,所以有一些改变。
var iSwiper = new Swiper('.goods-swiper-container-cont', {
scrollbar: '.swiper-scrollbar',
direction: 'vertical',
slidesPerView: 'auto',
freeMode: true,
roundLengths: true,
mousewheelControl: true,
mousewheelSensitivity: 0.5,
onSetTranslate: function(swiper, translate) {
//translate 一直为0,不可直接用
//swiper.height是指容器高度而不是整个滚动内容的高度
//判断当滑动距离超过多少时,才滑动到下一屏
if(-swiper.translate > (swiper.slides[0].scrollHeight - swiper.height + 13)) {
oSwiper.slideTo(1);
$(".goods_content").removeClass('cur')
$("#j-tab-con .swiper-slide img").click()
}
if(swiper.translate > 24) {
oSwiper.slideTo(0);
$(".goods_content").addClass('cur')
}
if(swiper.translate >= 0) {
if($(".goods_content").hasClass('cur')) {
$(".goods_detail").css({
'transform': 'translate3d(0px, 0px, 0px)'
})
}
}
if(oSwiper.activeIndex !=1) {
goodsDiv1()
}else{
goodsDiv3()
}
}
});
网友评论