javascript - touchmove卡顿问题

问题描述

问 题

我做的手机端滑动幻灯片，但是滑动的时候总是一卡一卡的，完全不流畅，不知道为什么

arrLi[i].addEventListener('touchmove',function(event){
                event.preventDefault();

                xMove = event.touches[0].clientX;
                direction = xMove - xDown;
                xTranslateMove = xTranslateEnd+direction;
                getUl.style.transform = 'translate('+xTranslateMove+'px,0)';
                getUl.style.webkitTransitionDuration = "0ms";
                //debounce(moveX);

            })

解决方案

移动端的性能本身就不是很强。
这段代码看不出啥大问题，可以优化的点是，没加3d,transform没做前缀检查。

我的建议是css布局，在js的move事件后直接改class，可能会好很多。

要想流畅，必须开3d，硬件加速。

这篇关于javascript - touchmove卡顿问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！