关于swiper内容高度超出一屏问题，及解决方式。

最新推荐文章于 2025-02-19 13:53:27 发布

前端渡劫

最新推荐文章于 2025-02-19 13:53:27 发布

阅读量9.7k

点赞数 1

分类专栏：移动端

本文链接：https://blog.youkuaiyun.com/Yw_better/article/details/82498306

版权

移动端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种在Swiper滑动组件中优化触摸事件处理的方法，通过在内容区域使用e.stopPropagation()阻止事件冒泡，避免了滑动时触发翻页的问题。特别地，文章详细解释了如何在滑动到顶部或底部时解除事件阻止，确保了用户体验的流畅性和准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理：在内容位置区域，使用 e.stopPropagation();阻止事件冒泡（触发翻页），当滑动到顶部或者底部时，解除e.stopPropagation()。


.swiper-slide{
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    overflow: auto  /*overflow :auto 必须*/
}

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