下拉刷新和上拉加载是移动端的常用

下拉刷新

监听 touchstart 事件，记录初始位置，e.touch[0].pageY

监听 touchmove 事件，记录当前位置和初始位置的差值，大于 0 表示下拉，通过 css3 的 tanslateY 属性使元素随手势向下滑动，距离为上方差值，并设置最大允许下拉差值

如果 touchmove 事件滑到最大值，则触发回调函数，同时将 css3 的 tanslateY 归 0，使元素回到初始位置

上拉刷新

就是移动端分页功能

总结

下拉刷新和上拉加载原理比较简单，难的是封装，要考虑兼容性、易用性、性能等，推荐使用第三方库来实现

比如 UI 库：vant、vux

比如：vue-pull-to-refresh、vue-infinite-scroll