vue移动端实现下拉刷新

看完这篇文章，相信大伙也一样可以，做出一个自己的刷新，加载的组件

说这个功能之前，大家要先了解一下，要怎么触发滚动条事件。

一定要注意，所有滚动事件都必须要满足这个条件，横向滚动条也一样，

只要满足子元素宽度大于父元素宽度就可以了。（下篇文章会讲怎么实现一个横向滚动条）

接入正题！！！

先来看看怎么剖析这个下拉刷新。

要用到的移动端的三个事件： touchstart(手指按下)，touchmove（手指移动），touchend（手指离开）

下拉刷新也就是（touchstart => touchmove(下移动) =>touchend）的一个过程

大体思路：

下拉主要与手指触摸y轴点有关

1.记录下手指按下y轴的坐标点

2.记录手指移动时，移动的距离（注意：要判断手指是向上移还是向下移，向上移就是滚动）

3.启动下拉刷新事件

看代码：

vue中要在methods里面注册事件，在绑定到父元素上，这里大家应该都是用vue-cli搭建的项目了吧！

没有的话，我回头给个链接给大家，里面有已经搭建好的项目结构。包含这个插件的源码，demo都在里面1

到这里就完结了，当然现在肯定不能直接用的，要结合你的实际业务逻辑来用的，

我把demo放到github上了 ：

https://github.com/13725102796/css3-demo/blob/master/src/plugins/scroll/scroll.vue

看不懂的，建议整个项目拉下拉，跑一下，里面还有检验的插件，弹窗的等等，都是我在项目中用到，再抽出来的。

方法： git clone https://github.com/13725102796/css3-demo.git

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!