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

思路

  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. shell脚本常用技巧

    shell脚本常用技巧 1.获取随机字符串或数字 ~]#echo $RANDOM | md5sum | cut -c 1-6 ~]#openssl rand -base64 4 | cut -c 1- ...

  2. MySQL 8.0新特性之原子DDL

    文章来源:爱可生云数据库 简介 MySQL8.0 开始支持原⼦ DDL(atomic DDL),数据字典的更新,存储引擎操作,写⼆进制日志结合成了一个事务.在没有原⼦DDL之前,DROP TABLE ...

  3. MySQL主从复制异步原理以及搭建

    MySQL主从复制的原理: 1.首先,MySQL主库在事务提交时会把数据变更作为时间events记录在二进制日志文件binlog中:MySQL主库上的sync_binlog参数控制Binlog日志以什 ...

  4. NoSQL数据库的认识

    SQL数据库和NoSQL数据库介绍 什么是SQL数据库? 关系型数据库是依据关系模型来创建的数据库.而所谓的关系模型就是“一对一.一对多.多对多”等关系模型,这是一种二维表格模型,因此一个关系型数据库 ...

  5. 端口扫描--zmap

    ZMap被设计用来针对整个IPv4地址空间或其中的大部分实施综合扫描的工具.ZMap是研究者手中的利器,但在运行ZMap时,请注意,您很有 可能正在以每秒140万个包的速度扫描整个IPv4地址空间 . ...

  6. [ML学习笔记] 决策树与随机森林(Decision Tree&Random Forest)

    [ML学习笔记] 决策树与随机森林(Decision Tree&Random Forest) 决策树 决策树算法以树状结构表示数据分类的结果.每个决策点实现一个具有离散输出的测试函数,记为分支 ...

  7. Symbol Table Applications

    符号表应用 在计算机发展的早期,符号表帮助程序员从使用机器语言的数字地址进化到在汇编语言中使用符号名称:在现代应用程序中,符号名称的含义能够通行于跨域全球的计算机网络.快速查找算法曾经并继续在计算机领 ...

  8. Alpha冲刺报告(3/12)(麻瓜制造者)

    今日已完成情况: 肖小强: 解决了之前的部署demo问题,学习了基本需要的api 江郑: 进行发布需求数据库的增删改查 邓弘立: 完成了轮播图的设计 刘双玉: 编码发布商品的接口,数据库表的修改 汪志 ...

  9. PyQt5--QLineEdit

    # -*- coding:utf-8 -*- ''' Created on Sep 20, 2018 @author: SaShuangYiBing Comment: ''' import sys f ...

  10. linux问题整理

    linux常用命令 //1.Linux如何查询进程?杀死一个进程? //2.文件权限,改变权限命令 //3.Linux中查看服务的命令 //4.linux查看内存 //5.查看磁盘空间的命令,查看文件 ...