移动端使用aui-slide轮播图,怎么在手滑轮播图的时候阻值父层容器的滑动事件?

发布于 2022-09-06 13:01:40 字数 3142 浏览 27 评论 0

apicloud编程,frame层中使用下拉刷新,组件调用了aui的slide,但是当手滑slider的时候,会导致父级容器也会下拉刷新,在aui-slile的touch事件中加过阻值冒泡的preventDefault和stopPropagation,但是都不能解决,请教大神这个问题应该怎么解决

//aui-slide内部代码
auiSlide.prototype.touchStart = function(event) {
        event.preventDefault();
        touchStartTime = new Date() * 1;
        firstTouchX = parseInt(event.changedTouches[0].pageX);
        firstTouchY = parseInt(event.changedTouches[0].pageY);
        isScrolling = undefined;
    };
    auiSlide.prototype.touchMove = function(event) {
        event.preventDefault();
        var touchMoveObj = event.changedTouches[0],
                touchX = parseInt(touchMoveObj.pageX);
            touchXDelta = touchX - firstTouchX;
            handleTranslateVal = touchXDelta/this.options.friction;
        //  滑动位移
        offsetX = parseInt(touchMoveObj.pageX) - firstTouchX;
        offsetY = parseInt(touchMoveObj.pageY) - firstTouchY;
        var direction = this.getDirection(offsetX,offsetY);
        if ( typeof isScrolling == 'undefined') {
            isScrolling = !!( isScrolling || Math.abs(offsetX) < Math.abs(offsetY) );
        }
        if(!isScrolling){
            event.preventDefault();
            if(!this.loop){ //不循环
                if(!this.continuous && this.index==1 && direction=='left'){
                    return;
                }
                if(!this.continuous && this.index==0 && direction=='right'){
                    return;
                }
                if(this.index == this.slideNodeList.length-1){
                    if(handleTranslateVal <= 0){
                        return;
                    }
                    this.setTranslate(this.getCircle(this.index-1), handleTranslateVal - this.slideWrapWidth, 0);
                }else if(this.index == 0){
                    if(handleTranslateVal >= 0){
                        return;
                    }
                    this.setTranslate(this.getCircle(this.index+1), this.slideWrapWidth, 0);
                }
            }

            this.setTranslate(this.getCircle(this.index-1), handleTranslateVal - this.slideWrapWidth, 0);
            this.setTranslate(this.index, handleTranslateVal , 0);
            this.setTranslate(this.getCircle(this.index+1), handleTranslateVal + this.slideWrapWidth, 0);

        }
    };
//外部调用
var slide = new auiSlide({  //主页轮播图
        container:document.getElementById("aui-slide"),
        "height":160,
        "speed":600,
        "autoPlay" : 5000,
        "pageShow":true,
        "pageStyle":'dot',
        "loop":true,
        'dotPosition':'center'
    });
    //同时,这个frame层中设置了下拉刷新
      api.setRefreshHeaderInfo({
            loadingImg: 'widget://image/refresh.png',
            bgColor: 'rgb(245,245,245)',
            textColor: '#000',
            textDown: '下拉刷新...',
            textUp: '松开刷新...',
            textLoading : '刷新中',
            showTime: false
        }, function(ret, err) {
            var timer = setTimeout(function(){
              api.refreshHeaderLoadDone();
            },1000);
        });

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文