当然不乏有很多下拉刷新的插件可以直接使用,但是自定义程度不强,大部分都只能改改文字,很难满足设计师的创意,譬如淘宝和京东首页那种效果,就需要自己花心思倒腾了,最近刚好有这种需求,做完了稍微总结一下,具体看源码即可。

思路

  1. touchstart 记录开始位置
  2. touchmove 判断上拉、下拉(暂时只用到了下拉)
  3. touchend 根据下拉、上拉位置判断是否达到下拉刷新、上拉加载更多
  4. @scroll.passive="onScrollFn($event)" 记录屏幕滚动,用来处理上滑时header rgba控制(沿用早期效果)
  5. touchmove 会触发onPulling,控制下拉时header opacity(参考目前淘宝效果)
  6. 正在刷新时触发refresh,此时有一个回弹效果
  7. 刷新完不管成功失败都有一个回调 refreshFinsh,作用是有时候没有拉到刷新区域页面回弹之后,相关的透明度可能无法还原

props

  1. offset 默认下拉高度
  2. bounce 回弹高度 offset - bounce
  3. maxScrollerHeight 最大下拉高度
  4. enableRefresh 是否开启刷新
  5. onRefresh 达到刷新条件调用的方法
  6. refreshFinsh 刷新完成后回调
  7. onScroll 向上滑动中回调
  8. onPulling 向下 下拉刷新中回调
  9. frequency 频率控制
  10. power 滑动和下拉的像素比例(使之更易拉动)

使用示例

<scroller
:on-refresh="refresh"
:offset="100"
:bounce="80"
:maxScrollerHeight="130"
:power="1.5"
@refreshFinsh="refreshFinsh"
@onScroll="onScroll"
@onPulling="onPulling"
>
<template slot="pull-refresh">
<!-- <span class="down-tip">下拉刷新</span>
<span class="up-tip">松开刷新</span>
<span class="refresh-tip">加载中..</span> -->
</template>
<div class="c-view-content">......</div>
</scroller>

使用案例

  1. 源码参考地址 传送门
  2. demo参考地址 传送门

注意事项

  1. ios touchmove移出屏幕可能不会触发touchend,可用touchcancel
  2. ios最外层容器默认是可以滚动的,未达到刷新条件的时候需要e.preventDefault()

存在问题

  1. 添加频率限制后,出现滑动完需等待一会才能继续滑动,这里的滑动未区分普通滑动/下拉/上拉
  2. 上拉加载更多TODO
  3. touchmove 没有使用节流函数

基于Vue手写一个下拉刷新的更多相关文章

  1. 利用Scrollow写一个下拉刷新

    利用scrollView滑动的2个监听方法实现 //滑动结束时候 出发的方法 - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView ...

  2. 放弃antd table,基于React手写一个虚拟滚动的表格

    缘起 标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反 ...

  3. Android如何定制一个下拉刷新,上滑加载更多的容器

    前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...

  4. H5页面基于iScroll.js插件实现下拉刷新,上拉加载更多

    前言 在我之前的项目中,页面总是干巴巴的,用户的体验不是特别完美,我也是一直觉得把设计师给到的psd做出来就好,很少考虑用户的感受.我喜欢看不同的App,操作每个步骤,观赏每个能和我互动的交互设计效果 ...

  5. 基于vue手写tree插件那点事

    目录 iview提供的控件 手写控件 手写控件扩展 手写控件总结 # 加入战队 微信公众号 主题 Tree树形控件在前端开发中必不可少,对于数据的展示现在网站大都采取树形展示.因为大数据全部展示出来对 ...

  6. 原生js手机端触摸下拉刷新

    废话不多说,直接上代码,这里感谢我的好朋友,豆姐 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  7. iscroll5实现一个下拉刷新上拉加载的效果

    直接上代码!!! <!DOCTYPE html><html><head lang="en"> <meta charset="UT ...

  8. 用vue写一个仿app下拉刷新的组件

    如果你用vue弄移动端的页面,那么下拉刷新还是比较常见的场景,下面来研究如何写一个下拉刷新的组件(先上图); 由于节省大家的时间,样式就不贴出来了. html结构也不必介绍了,直接看代码吧-.- &l ...

  9. 基于better-scroll封装一个上拉加载下拉刷新组件

    1.起因 上拉加载和下拉刷新在移动端项目中是很常见的需求,遂自己便基于better-scroll封装了一个下拉刷新上拉加载组件. 2.过程 better-scroll是目前比较好用的开源滚动库,提供很 ...

随机推荐

  1. 入坑Vue

    长期的后端数据开发着实有些枯燥无趣,项目完工,闲暇之际,最近一直在研究前端方面的东西,不得感叹,前端技术发展速度快的让人有些目不暇接,从jQuery开启的插件化时代,几乎许多网站都被jQuery支配, ...

  2. 工作中遇到的问题收集--.NET

    一.拒绝访问 temp 目录.用来运行 XmlSerializer 的标识“IIS APPPOOL\MZJYMIS”没有访问 temp 目录的足够权限.CodeDom 将使用进程正在使用的用户帐户进行 ...

  3. 大话存储 3 - 七种磁盘RAID技术

    RAID技术 Redundant Array of Independent Disks 由独立的磁盘组成的具有冗余特性的阵列. 有两个特性: 阵列:需要很多磁盘来组成 冗余:允许某块磁盘损坏之后,数据 ...

  4. 【转】学习Linux守护进程详细笔记

    [原文]https://www.toutiao.com/i6566814959966093837/ Linux守护进程 一. 守护进程概述 守护进程,也就是通常所说的Daemon进程,是Linux中的 ...

  5. Beta阶段第一次冲刺

    Beta阶段第一次冲刺 以后严格按照Git标准来,组员有上传Git的才有贡献分没有的为0 代码签入图 1.part1 -站立式会议照片 2.part2 -项目燃尽图 3.part3 -项目进展 1.正 ...

  6. 阿里八八Alpha阶段Scrum(2/12)

    今日进度 叶文滔: 11.1:搭建Andriod Studio开发环境 11.2:已经完成Alpha阶段的APP整体框架搭建. 11.3:根据会议讨论内容,增加了模块标题栏返回键. 王国超: 完成了多 ...

  7. SVG绘制图形

    一.SVG介绍 1.SVG指可伸缩矢量图片 2.SVG用来定义用于网络的基于矢量的图形 3.SVG使用XML格式定义图形 4.SVG图像在放大或改变尺寸的情况下其图形质量不会有损失 5.SVG是万维网 ...

  8. volatile和synchronized的区别与联系[转]

    volatile是一个变量修饰符,而synchronized是一个方法或块的修饰符.所以我们使用这两种关键字来指定三种简单的存取变量的方式. int i1;                       ...

  9. Promise 模式解析:Promise模式与异步及声明式编程

    一.构建流程 1.(异步)数据源(请求)的构建:Promise的构建并执行请求: 2.处理流程的构建:then将处理函数保存: 二.处理: 1.请求的响应返回: 2.调用后继处理流程. 三. 1.构建 ...

  10. 【转】numpy中mean和average的区别

    转自:https://blog.csdn.net/Muzi_Water/article/details/85104941 mean和average都是计算均值的函数,在不指定权重的时候average和 ...