欢迎来到源码交易网,为站长提供交易担保服务 访问移动版
站长交易首选担保平台!
酷客淘

swiper滑屏中某一页超出高度解决方法

日期: 2019-11-13 08:12:30 人气: -


swiper做多屏滑动的时候,其中一页超高一屏的高度了。整体上就破坏了滑屏的整体感觉,但项目中有需要就需要修改啊。

需要修改的样式:


.swiper-slide {

background: #f1f1f1;

color:#000;

text-align: center;

overflow: auto;

-webkit-overflow-scrolling: touch;

}



js


var swiper = new Swiper('.swiper-container', {

direction: 'vertical',

initialSlide : 0,

noSwiping : true

});

var startScroll, touchStart, touchCurrent;

swiper.slides.on('touchstart', function (e) {

startScroll = this.scrollTop;

touchStart = e.targetTouches[0].pageY;

}, true);

swiper.slides.on('touchmove', function (e) {

touchCurrent = e.targetTouches[0].pageY;

var touchesDiff = touchCurrent - touchStart;

var slide = this;

var onlyScrolling =

( slide.scrollHeight > slide.offsetHeight ) &&

(

( touchesDiff < 0 && startScroll === 0 ) ||

( touchesDiff > 0 && startScroll === ( slide.scrollHeight - slide.offsetHeight ) ) ||

( startScroll > 0 && startScroll < ( slide.scrollHeight - slide.offsetHeight ) )

);

if (onlyScrolling) {

e.stopPropagation();

}

}, true);