专栏首页coding个人笔记Vue下拉刷新组件

Vue下拉刷新组件

之前写了上拉加载,当然也就有下拉刷新。下拉刷新在web项目中使用会比上拉加载少。这边补充两点:

1、上拉加载和下拉刷新最大意义是说明原理;

2、全局注册往往是不够理想的。比如,如果你使用一个像 webpack 这样的构建系统,全局注册所有的组件意味着即便你已经不再使用一个组件了,它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

下拉刷新原理:

监听touchStart、touchMove、touchEnd,当手指触碰的时候,记录当前位置,然后移动的时候判断,滚动条为0,且移动的距离(当前pageY减去初始触碰的pageY)大于0小于设定的某个值的时候,让加载动画的高度等于移动的距离。移动结束的时候,判断是否大于某个高度,大于就触发刷新方法。

随便找一个vue项目跑起来就可以看了,这边发现微信发布的时候代码都乱码了,考下来之后格式化一下。

已经部署到npm包:

https://www.npmjs.com/package/wade-ui

下载:

Npm install wade-ui -S

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-01-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 图片预加载和懒加载

    对于前端性能来说,图片是一个过不去的坎,又想能页面美观,又想页面响应速度快,那么这时候就有了两个技术,图片懒加载和预加载。在这边我只介绍一些方法和原理,不具体把...

    wade
  • 性能知识点二

    之前讲到重排,布局的时候使用flex时,比使用inline-block和float时重排更快,所以在布局时可以优先考虑Flex。

    wade
  • v-if和v-show的区别

    vue使用过程中,v-show和v-if必不可少,但是很多人在用的时候都不知道两者到底有什么区别,大都是按照习惯去使用,其实两者是要分场合使用的。

    wade
  • 深入seajs源码系列二

    模块类和状态类 参照上文的demo,我们结合源码分析在简单的API调用的背后,到底使用了什么技巧来实现各个模块的依赖加载以及模块API的导出。        ...

    欲休
  • 游戏中的反馈设计

    游戏中的反馈设计,是让玩家快速适应游戏操作,获得参与感和成就感的重要手段,适度且精妙的反馈对提高游戏的易上手性,增强玩家的参与感和成就感有不可或缺的作用。

    Shawn.W
  • blink的一处断言错误

    --url=http://music.yule.sohu.com/20170926/n514522612.shtml 里有断言错误

    龙泉寺扫地僧
  • XSS的构造技巧

    正常情况下,双引号被转义了,后面的(引号外)内容是会被赋给**并得不到有效输出的~(一旦赋值那么这就知识一个普通的字符串,而不会构成xss)

    Mirror王宇阳
  • 【AI芯片争夺战】谷歌TPU率队,颠覆3350亿美元的半导体行业

    【新智元导读】人工智能系统的加速正在从根本上重塑着每年创造了3350亿美元的半导体行业。计算机开始认识一切,从花草到人脸,从文本到声音,以及学会开车。统治了计算...

    新智元
  • 方老师聊Nginx知识点

    起因是昨天几个同事讨论一个方案,有人提到让 nginx 同时监听 0.0.0.0 和 一个具体 ip。我就插了一嘴,说 linux 不允许同时监听 0.0.0....

    糖果
  • Java Web中JSP中6种动作概况知识点总结——每日一语法学习

    JSP动作利用XML语法格式的标记来控制Servlet引擎的行为。利用JSP动作可以动态地插入文件、重用JavaBean组件、把用户重定向到另外的页面、为Jav...

    用户1289394

扫码关注云+社区

领取腾讯云代金券