移动端touch事件实现无缝滚动及下拉刷新

最新推荐文章于 2025-06-19 22:05:12 发布

samfung09

最新推荐文章于 2025-06-19 22:05:12 发布

阅读量5k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： h5 JavaScript 文章标签： touch事件旋转缩放无缝滚动 iscroll下拉刷新

本文链接：https://blog.youkuaiyun.com/samfung09/article/details/81516340

本文介绍了如何在移动端利用touch事件实现无缝滚动和下拉刷新功能。详细探讨了手势识别，包括旋转和缩放，以及通过iscroll-probe.js库和自定义方法实现下拉刷新的细节。内容涵盖了触摸事件对象的关键属性，无缝滚动的实现原理，以及下拉或上拉的判断逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

pc端的鼠标事件写多了，但移动端没有鼠标，所以来写写移动端的touch事件。touch事件主要用到touchstart，touchmove，touchend三个事件，事件没什么好说的，做效果是最主要用到的是touch事件对象给我们提供的几个属性

touches 屏幕触点集合

targetTouches touch事件绑定元素身上的触点集合

changesTouches 发生改变了的触点集合

以下引用segmentfault@pangpang的图:

手势

说到手势，那么可以确定当前至少有两个以上触点，下面就来简单的说说两个触点的旋转手势和缩放手势。其实很简单，在touchstart事件中确定两个触点（e.targetTouches[0]，e.targetTouches[1]）的初始坐标，然后在touchmove事件中得到移动后的两触点坐标，然后进行计算判断，下面是我画的计算图

无缝滚动

pc端的无缝轮播写了很多次了，其实移动端的无缝滚动原理也差不多。这世界没有真正的无缝滚动，都是些障眼法，在pc端要将第一个滑块复制一份加到最后，而移动端要将原来第一和最后一个滑块复制出来分别加到最后面和最前面。举例原来有四个滑块排列1、2、3、4，现在将它变成4、1、2、3、4、1共六块，如果当前touch事件target元素为第一个4时，则将当前可视区平移到第二个4，如果当前touch事件target元素为最后一个1时，则将当前可视区平移到第一个1。

具体实现看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>touch无缝滚动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html, body{
            width: 100%;
            height: 100%;
        }
        html{
            font-size: 20px;
        }
        #banner{
            width: 100%;
            height: 8rem;
        }
        #banner ul{
            width: 75rem;
            overflow: hidden;
            list-style: none;
        }
        #banner ul li{
            width: 18.75rem;
            height: 8rem;
            float: left;
            color: white;
            font-size: 26px;
            line-height: 8rem;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="banner">
        <ul>
            <li style="background: pink">1</li>
            <li style="background: orange">2</li>
            <li style="background: purple">3</li>
            <li style="background: skyblue">4</li>
        </ul>
    </div>
    <script>
        //移动端rem兼容
        document.documentElement.style.fontSize = 20*document.documentElement.clientWidth/375 + 'px';

        var banner = document.getElementById('banner');
        var ul = banner.getElementsByTagName('ul')[0];
        var w = ul.firstElementChild.offsetWidth;
        var i = 1;
        //在ul首尾添加li，为了无缝滚动
        ul.insertBefore(ul.lastElementChild.cloneNode(true), ul.children[0]);
        ul.appendChild(ul.children[1].cloneNode(true));
        ul.style.width = ul.children.length*w+'px';
        //当前ul滑动到什么位置了
        var bannerLeft = -w * i;
        ul.style.transform = 'translateX('+bannerLeft+'px)';

        var startX = 0, startY = 0;
        var disX = 0, dir = '';
        banner.addEventListener('touchstart', function(e){
            e.preventDefault()
            // e.cancelBubble = true;
            ul.style.transition = '';       //先清除ul上的transition
            startX = e.targetTouches[0].clientX;
            dir = '';       //每开始touch一次先清除滑动方向

            //如果当前touch的是第一个li，则将ul平移到倒数第二个li的位置            
            if(e.target == ul.firstElementChild){
                i = ul.children.length-2;
                bannerLeft = -w * i;
                ul.style.transform = 'translateX('+bannerLeft+'px)';
            //如果当前touch的是最后一个li，则将ul平移到第二个li的位置
            }else if(e.target == ul.lastElementChild){
                i = 1;
                bannerLeft = -w * i;
                ul.style.transform = 'translateX('+bannerLeft+'px)';
            }

            disX = startX - bannerLeft;
            banner.addEventListener('touchmove', function(e){
                e.preventDefault()
                //如果滑动方向还没确定，先确定一下
                if(!dir){       
                    if(Math.abs(e.targetTou