全部
常见问题
产品动态
精选推荐

实现下拉刷新功能

管理 管理 编辑 删除

下拉刷新主要用于移动端网页,PC端网页并没有 touch 事件所以需要自行模拟。实现该功能主要依赖如下几个事件:

  • touchstart
  • touchmove
  • touchend

从事件名我们很容易就能看出这几个事件分别代表什么含义。在事件回调函数里面,可以获取 touchList,该 list 中的每一个元素表示一个触摸点的信息。可以看出,触摸事件可以监听到多个触摸点,例如多个手指滑动屏幕就会有多个触摸点。实现下来刷新功能,我们只考虑一个触摸点即可。

思路

下拉刷新的思路很简单:

  1. 触摸开始时保存初始触摸点在屏幕上的坐标
  2. 触摸移动时计算移动的触摸点和初始坐标点的距离,如果距离大于阈值,则触发刷新回调
  3. 触摸结束后重置触摸状态

值得注意的是,在 touchmove 的时候,计算下拉距离的同时也要显示下拉加载提示元素,具体思路就是设置提示元素的 min-height,设置 min-height 使动画生效。

<html>

<head>
    <title>Pulldown refresh</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style>
        body {
            margin: 0;
            background-color: #eee;
        }

        #tip-wrap {
            height: 0;
            overflow: hidden;
            text-align: center;
            background-color: #ccc;
            font-size: 0.9rem;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            pointer-events: none;
            transition: min-height 0.2s ease;
        }
    </style>
</head>

<body>
    <div id="tip-wrap">
        <div id="tip">松开刷新</div>
    </div>

    <div id="wrap">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique delectus dolores dolore commodi minus,
        corrupti, veritatis totam repudiandae facilis dolorum beatae labore nesciunt vel fugit illum quo distinctio
        praesentium accusamus.
    </div>

    <script>
        let state = undefined // start | moving | end
        let touchStartY = undefined;
        let touchTrigger = 100;
        let dist = 0
        const tip = document.querySelector('#tip-wrap')
        const tipmsg = document.querySelector('#tip')
        const wrap = document.querySelector('#wrap')

        window.addEventListener('touchstart', (e) => {
            console.log('touchstart', e.touches)
            if (!window.scrollY)
                touchStartY = e.touches[0].screenY;
            state = 'start'
        }, false)

        window.addEventListener('touchmove', (e) => {
            // console.log('touchmove', e.touches)
            const screenY = e.touches[0].screenY

            if (state === 'start') {
                touchStartY = screenY
                state = 'moving'
            }

            dist = screenY - touchStartY

            if (dist > 0) {
                e.preventDefault();
                tip.style.minHeight = Math.min(dist, 50) + 'px'
            }
        }, { passive: false })

        window.addEventListener('touchend', (e) => {
            console.log('touchend', e.touches)
            if(dist >= 50 && !window.scrollY) {
                alert('refresh')
            }
            touchStartY = 0
            tip.style.minHeight = 0
        }, false)
    </script>
</body>

</html>

注意addEventListener('touchmove', cb, { passive: false }) { passive: false } 能达到下拉页面时页面不会整体向下移动的效果。

请登录后查看

CRMEB-慕白寒窗雪 最后编辑于2023-05-19 10:51:59

快捷回复
回复({{post_count}}) {{!is_user ? '我的回复' :'全部回复'}}
回复从新到旧

{{item.user_info.nickname ? item.user_info.nickname : item.user_name}}

作者 管理员 企业

{{item.floor}}# 同步到gitee 已同步到gitee {{item.is_suggest==1? '取消推荐': '推荐'}}
{{item.floor}}#
{{item.user_info.title}}
附件

{{itemf.name}}

{{item.created_at}}  {{item.ip_address}}
{{item.like_count}}
{{item.showReply ? '取消回复' : '回复'}}
删除
回复
回复

{{itemc.user_info.nickname}}

{{itemc.user_name}}

作者 管理员 企业

回复 {{itemc.comment_user_info.nickname}}

附件

{{itemf.name}}

{{itemc.created_at}}   {{itemc.ip_address}}
{{itemc.like_count}}
{{itemc.showReply ? '取消回复' : '回复'}}
删除
回复
回复
查看更多
回复
回复
656
{{like_count}}
{{collect_count}}
添加回复 ({{post_count}})

相关推荐

CRMEB-慕白寒窗雪 作者
社区运营专员---高冷のBoy | 呆萌のGirl

回答

3269

发布

1787

经验

49430

快速安全登录

使用微信扫码登录
{{item.label}} {{item.label}} {{item.label}} 板块推荐 常见问题 产品动态 精选推荐 首页头条 首页动态 首页推荐
加精
取 消 确 定
回复
回复
问题:
问题自动获取的帖子内容,不准确时需要手动修改. [获取答案]
答案:
提交
bug 需求 取 消 确 定

微信登录/注册

切换手机号登录

{{ bind_phone ? '绑定手机' : '手机登录'}}

{{codeText}}
切换微信登录/注册
暂不绑定
CRMEB客服

CRMEB咨询热线 咨询热线

400-8888-794

微信扫码咨询

CRMEB开源商城下载 开源下载 CRMEB官方论坛 帮助文档
返回顶部 返回顶部
CRMEB客服