详解vue移动端下拉刷新

inapt 发布于2019-08-22 16:35 / 292人阅读

摘要：看完这篇文章，相信大伙也一样可以，做出一个自己的刷新，加载的组件说这个功能之前，大家要先了解一下，要怎么触发滚动条事件。下篇文章会讲怎么实现一个横向滚动条接入正题先来看看怎么剖析这个下拉刷新。

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

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

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

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

接入正题！！！

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

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

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

大体思路：

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

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

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

   3.启动下拉刷新事件

看代码：

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

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

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

我把demo放到github上了：

https://github.com/1372510279...

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

方法： git clone https://github.com/1372510279...

同时，也欢迎各位提提 issues，或者各位想扩展一些其它的插件都可以。

最后，别忘了给个star！与君互勉，一起啃砖！

下一篇就讲怎么做这个滚动加载！！！

云服务器私有云 js移动端向上滚动刷新数据下拉刷新下拉刷新空白下拉刷新控件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94487.html

实现移动端上拉加载和下拉刷新的vue插件(mescroll.js)

摘要：做一个简单的移动端展示项目，后台分页后前端加载，实现上拉加载下一页，找了下，还是用这个插件好一点安装不要使用安装导入在哪个页面使用则在哪个页面导入这里的话，我使用全局导入会出现问题若有错还请大家指出暂时想到的就是局部引入注册组件注册组件做一个简单的移动端展示项目，后台分页后前端加载，实现上拉加载下一页，找了下，还是用这个mescroll.js插件好一点 1.npm安装 npm ins...

hightopo 2019-08-23 11:58 评论0 收藏0
下拉刷新，上拉加载插件mescroll源码分析

摘要：最近项目要求增加一个下拉刷新的功能，自己也试着写了一个，单总是有点卡顿。最近项目要求增加一个下拉刷新的功能，自己也试着写了一个，单总是有点卡顿。于是学习了下别人的插件（ps : 既然写不出好插件，就要会学习别人的）：官网github地址：https://github.com/mescroll/m... 1.整体预发结构 ;(function(name, definition) {...

frontoldman 2019-08-26 12:09 评论0 收藏0
下拉刷新，上拉加载插件mescroll源码分析

摘要：最近项目要求增加一个下拉刷新的功能，自己也试着写了一个，单总是有点卡顿。最近项目要求增加一个下拉刷新的功能，自己也试着写了一个，单总是有点卡顿。于是学习了下别人的插件（ps : 既然写不出好插件，就要会学习别人的）：官网github地址：https://github.com/mescroll/m... 1.整体预发结构 ;(function(name, definition) {...

ztyzz 2019-08-02 11:03 评论0 收藏0
移动端下拉刷新、上拉加载之vueScroll

摘要：移动端开发，处理列表翻页和数据的时候，下拉刷新和上拉加载应用的比较广泛，今天给大家推荐一个的插件，，首先上图话不多说，上代码了一引入并使用二在或者组件里面使用三在文件里面操作插件首先在在里面写上方法在里面实现申明好然后继续在里面写上刷新和移动端开发，处理列表翻页和数据的时候，下拉刷新和上拉加载应用的比较广泛，今天给大家推荐一个vue的插件，vueScroll，首先上图： showIm...

张汉庆 2019-08-23 16:15 评论0 收藏0