JAVA、PHP、前端、APP、网站开发 - 开发技术学习

开发技术学习 » 前端设计 » swiper滑屏中某一页超出高度解决方法

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

此文被围观2933日期: 2019-11-11 分类 : 前端设计  标签:  ··


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);


来源:https://blog.csdn.net/flower46273736/article/details/52687496

https://github.com/nolimits4web/Swiper/issues/1467

站点声明:部分内容源自互联网,为传播信息之用,如有侵权,请联系我们删除。

© Copyright 2011-2024 www.kfju.com. All Rights Reserved.
超级字帖 版权所有。蜀ICP备12031064号