swiper滑动与下拉刷新冲突

夏雪冬花

swiper4.x 滑动的时候与下拉刷新冲突。

问题：侧滑的时候，触发下拉刷新；下拉刷新的时候触发侧滑。有点像四匹马往四个方向跑的感觉。

解决思路：滑动时，禁止页面弹动。

解决方案：初始化swiper时，加入sliderMove和touchEnd方法。
即:

       sliderMove: function(swiper) {
            api.setFrameAttr({
                name: api.frameName,
                bounces: false
            });
        },
        touchEnd: function(swiper) {
            api.setFrameAttr({
                name: api.frameName,
                bounces: true
            });
        }


后某大佬发现，swiper4.x sliderMove的move效果处理比touchMove效果要好，后改正sliderMove。

辉哥_0808

嗯嗯

易大侠

get到了

夏雪冬花

0.0  帖子，我编辑了下，怎么发现不是分享贴子了  0.0

夏雪冬花

懵逼~   分享技巧帖子。。。发生改变了，变成问题帖子了。。。emmmmm，怎么改回去。。。。

马浩川

感谢分享 帮你改成分享帖了

夏雪冬花

马浩川 发表于 2020-1-19 11:44
感谢分享 帮你改成分享帖了

谢谢。下次我直接帖子后追加了。。

3331123

试了一下sliderMove和touchStart好像都可以，感觉上没区别诶

夏雪冬花

3331123 发表于 2020-1-19 16:01
试了一下sliderMove和touchStart好像都可以，感觉上没区别诶

我这里，touchStart 会导致无法下拉刷新。

狂梦

对版主的方案优化下，为了防止滑动结束后马上改为可弹动，导致依然存在“本是要滑轮播图，却触发的下拉刷新，导致轮播图滑动体验卡顿”，这里加了延时，又为了防止延时触发跑到下一次sliderMove后执行导致sliderMove的设定时效，sliderMove这里每次要销毁下延时。
   var touchEndtimer;
    var swiper = new Swiper('.swiper-container', {
        loop: true,
        autoplay: true,
        on: {
            sliderMove: function(swiper) {
                clearTimeout(touchEndtimer);
                api.setFrameAttr({
                    name: api.frameName, //KM++ 解决下拉跟轮播图滑动冲突
                    bounces: false
                });
            },
            touchEnd: function(swiper) {
                touchEndtimer = setTimeout(function() {
                    api.setFrameAttr({
                        name: api.frameName, //KM++ 解决下拉跟轮播图滑动冲突
                        bounces: true
                    });
                }, 3000); //轮播图滑动后，3秒内不可下拉
            }
        },

    });