javascript - 滚动列表上拉加载的时候列表抖动的问题
ringa_lee
ringa_lee 2017-04-10 16:01:19
[JavaScript讨论组]

http://ximan.github.io/dropload/examples/news-list.html

这个在底部上拉加载数据的demo里面,在拖动的时候会出现列表抖动的情况,我发现是因为每次进行scrollTop操作之后导致每次获取的e.changedTouches[0].pageY会有所不同,可能是因为页面被上移了之后获取的位置也跟着上移了,有办法处理这个bug吗

function fnTouchmove(e, me){

        me._curY = e.touches[0].pageY; //这里获取的值会因为上拉而变动
        me._moveY = me._curY - me._startY;

        if(me._moveY > 0){
            me.direction = 'down';
        }else if(me._moveY < 0){
            me.direction = 'up';
        }

        var _absMoveY = Math.abs(me._moveY);
        console.log(me._curY)
        // 加载上方
        if(me.opts.loadUpFn != '' && me._scrollTop <= 0 && me.direction == 'down'){
            e.preventDefault();
            if(!me.insertDOM){
                me.$element.prepend('

'); me.insertDOM = true; } me.$domUp = $('.'+me.opts.domUp.domClass); fnTransition(me.$domUp,0); // 下拉 if(_absMoveY <= me.opts.distance){ me._offsetY = _absMoveY; // 待解决:move时会不断清空、增加dom,有可能影响性能,下同 me.$domUp.html('').append(me.opts.domUp.domRefresh); // 指定距离 < 下拉距离 < 指定距离*2 }else if(_absMoveY > me.opts.distance && _absMoveY <= me.opts.distance*2){ me._offsetY = me.opts.distance+(_absMoveY-me.opts.distance)*0.5; me.$domUp.html('').append(me.opts.domUp.domUpdate); // 下拉距离 > 指定距离*2 }else{ me._offsetY = me.opts.distance+me.opts.distance*0.5+(_absMoveY-me.opts.distance*2)*0.2; } me.$domUp.css({'height': me._offsetY}); } // 加载下方 if(me.opts.loadDownFn != '' && me._childrenHeight <= (me._meHeight+me._scrollTop) && me.direction == 'up'){ e.preventDefault(); if(!me.insertDOM){ me.$element.append('

'); me.insertDOM = true; } me.$domDown = $('.'+me.opts.domDown.domClass); fnTransition(me.$domDown,0); // 上拉 if(_absMoveY <= me.opts.distance){ me._offsetY = _absMoveY; me.$domDown.html('').append(me.opts.domDown.domRefresh); // 指定距离 < 上拉距离 < 指定距离*2 }else if(_absMoveY > me.opts.distance && _absMoveY <= me.opts.distance*2){ me._offsetY = me.opts.distance+(_absMoveY-me.opts.distance)*0.5; me.$domDown.html('').append(me.opts.domDown.domUpdate); // 上拉距离 > 指定距离*2 }else{ me._offsetY = me.opts.distance+me.opts.distance*0.5+(_absMoveY-me.opts.distance*2)*0.2; } me.$domDown.css({'height':me._offsetY}); me.$scrollArea.scrollTop(me._offsetY+me._scrollTop); //这里对列表进行了上拉 } }

bug情况

正常情况应是

ringa_lee
ringa_lee

ringa_lee

全部回复(0)
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号