移动端的touch事件

简单总结一下移动端的touch事件应该如何使用。

一般情况下,touch事件用于ul列表,通过手指触屏滑动来移动列表。
主要通过js中的touchstart,touchmove以及touchend事件来实现。

附上简单的左右滑动实现示例代码:

html代码:

    // 样式注意
    <style>
        .top{
            height: 7.8rem;
            width: 100%;
            overflow: hidden;   // ul的父盒子一定要设置超出部分隐藏
        }
        .top ul{
            width: 200%;   // ul的宽度要足够大,可以容纳所有的li标签内容
            height: 7.8rem;
            position: absolute;
            top: 0;
            left: 0;
        }
        .top ul li{
            float: left;   //li标签一定要浮动
        }
    </style>
    <div class="top">
        <ul>
            <li></li>
            <li></li>
        </ul>
    </div>

Js代码:

        // 要移动的ul标签
        var moveUl = document.querySelector('.top ul');
        // 手机屏幕的宽度
        var width = document.body.offsetWidth;
        // ul标签初始状态下距离屏幕左边的距离
        var leftX = 0;
        // 滑动起始值
        var startX = 0;
        // 滑动的距离
        var moveX = 0;
        moveUl.addEventListener('touchstart',function(event){
            // 记录起始值
            starX = event.touches[0].clientX;
            starY = event.touches[0].clientY;
            // 获取滑动之前ul标签距离左边的距离
            leftX = moveUl.offsetLeft;
            // 关闭过渡,让ul标签随手指滑动
            moveUl.style.transition = 'none';
        })
        moveUl.addEventListener('touchmove',function(event){
            event.preventDefault();  //阻止浏览器的默认事件
            // 计算移动的距离
            moveX = event.touches[0].clientX - starX;
            moveY = event.touches[0].clientY - starY;
            // 移动UL,移动值为滑动前距离屏幕左边的距离加上手指移动的距离
            moveUl.style.left = (moveX + leftX)+'px';
        })
        moveUl.addEventListener('touchend',function(event){
            // 滑动结束后ul距离屏幕左边的距离
            var currentLeft = moveUl.offsetLeft;
            // 如果滑动的距离大于屏幕宽度的1/6,则将ul向左或向右移动整个屏幕的宽度
            if(Math.abs(moveX) > width / 6){
                if(moveX > 0){
                    // 开启过渡,向右滑动
                    moveUl.style.transition = 'all 0.5s';
                    moveUl.style.left = '0px';
                }else{
                    // 开启过渡,向左滑动
                    moveUl.style.transition = 'all 0.5s';
                    moveUl.style.left = -width+'px';
                }
            }else{
                // 滑动距离过小,ul触屏结束后还原初始状态
                moveUl.style.transition = 'all 0.5s';
                moveUl.style.left = '0px';
            }
         })

  注:一般情况下, 是在touchstart中添加event.preventDefault()方法,阻止浏览器的默认行为,这样的话,在手指左右滑动的时候,页面是不会上下滑动的。
  但是,如果页面中存在click点击事件的话,会发现这样做导致了页面中的click事件无法触发。此时正确的做法是将event.preventDefault()方法,放在touchmove中,click事件就可以正常触发了。
  如果你的页面还有上下滚动的需求,那么很有可能此时页面又不能滚动了,所以最好在touchmove中加上方向判断,可以加上下面这段代码(自己的代码,根据需要修改):

var w = starX<0?starX*-1:starX;     //x轴的滑动值
var h = starY<0?starY*-1:starY;     //y轴的滑动值
if(w>h){                //如果是在x轴中滑动
   event.preventDefault();
}

就是在touchmove中判断x轴和y轴的移动值,判断当前是往哪个方向滑动,如果是在x轴上滑动(左右),就调用event.preventDefault()方法,如果是在y轴上滑动(上下),就不调用event.preventDefault()。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值