照片来自达里亚舍夫佐娃
Pull-to-refresh是智能手机上非常流行的滑动手势，允许用户在数据列表之上加载新内容。它被用于智能手机和网络应用程序的大多数流行应用程序，并已成为用户体验的主要部分。
https://codepen.io/Vijit_Ail/full/pmbypw（打开devtools试试动画）
猜猜看，我设法用没有第三方库或jQuery插件来构建它，只是普通的Vanilla JavaScript。😎
一个非常简单的标记 - 一个顶部装载容器，将包含装载程序和一堆卡。
让我们来看看有趣的东西😁。
我们的想法是默认隐藏加载容器，并在用户向下滑动时将其向下滑动。transform-style : preserve-3d将卡片放置在3D空间中，卡片包装器上的透视属性将决定用户从他们的角度看到的内容; 较低的值会产生更强烈的3D效果。请注意，未在子元素上设置透视图。有关CSS 3D动画和变换的更多信息。
这就是我们需要的所有CSS。现在让我们开始添加滑动手势。
JS中的触摸事件由触摸事件侦听器处理。这些类似于鼠标事件，除了它们允许在触摸表面上进行多次触摸。
pStart和pCurrent对象将存储开始和当前触摸的触摸位置。我们需要这些来找到Y坐标的变化来计算卡片的旋转。
在swipeStart()函数中，我们将捕获触摸坐标并将其分配给pStart对象。
在swipe()函数中，我们pCurrent使用当前触摸坐标设置对象。下一步是找到起始位置和当前Y位置之间的差异，以计算滑动距离并根据距离的30％进行旋转。装载容器仅在距离大于100时出现。
swipeEnd()如果触摸已开始但未启用加载，该功能将撤消旋转。
在加载时，为了演示的目的，加载容器将向下滑动2秒，但在实际示例中，根据服务器的响应，可能需要更多或更少的时间。一旦装载完成，装载容器和卡将移回到原始状态。
我从这个 stackoverflow问题中获取了JavaScript的参考。
我的codepen中的完整源代码。打开devtools以查看动画的实际效果。
我希望你今天能学到新东西😄。如果您对改进代码有任何疑问或有任何建议，请随时写下您的回复。
干杯和快乐的编码🍻✌
转：https://levelup.gitconnected.com/pull-to-refresh-animation-with-vanilla-javascript-6574d7c4ad24
网友评论