javascript - 移动端 touchstart 问题

问题描述

问 题

<script type="text/javascript">

  var ul = document.querySelector('ul');
  var li = ul.querySelectorAll('li');
  ul.style.width = li[0].offsetWidth * li.length + 'px';
   var startX;
    function start(e) {
        startX = e.changedTouches[0].pageX;
    }

    function move(e) {
        e.preventDefault();
        var moveX = e.changedTouches[0].pageX;
        var moveDistance = moveX - startX;
       ul.style.left = moveDistance + 'px'
    }

    ul.addEventListener('touchstart',start);
     ul.addEventListener('touchend',move);
</script>


首页我点击ul滑动，滑动的一定的距离松开后， 再start时候，left的值就为0了，start 并不没有设置 left 的值，为么会变呀？？？？ 

解决方案

题主方便贴完整代码吗？
更新：
题主你好，我看了你的代码。问题应该在 move 函数的逻辑。

    function move(e) {
        e.preventDefault();
        var moveX = e.changedTouches[0].pageX;
        // 改为ul.style.left = ul.offsetWidth + moveDistance + 'px';
        var moveDistance = moveX - startX;
       ul.style.left = moveDistance + 'px'
    }

首先说下 left 值变为 0 的原因。
move 函数里面
var moveDistance = moveX - startX;
ul.style.left = moveDistance + 'px';

当 moveDistance 为 0 时，left 也就为0 了。

我猜测你应该是想 left 改变 moveDistance 长度，而不是直接赋值为 moveDistance 。
即 ul.style.left = ul.offsetWidth + moveDistance + 'px';

最后补充下，你用递增实现动画是很不科学的,建议题主看看动画的实现，推荐使用requestAnimationFrame。

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