基于Vue手写一个下拉刷新
当然不乏有很多下拉刷新的插件可以直接使用,但是自定义程度不强,大部分都只能改改文字,很难满足设计师的创意,譬如淘宝和京东首页那种效果,就需要自己花心思倒腾了,最近刚好有这种需求,做完了稍微总结一下,具体看源码即可。
思路
- touchstart 记录开始位置
- touchmove 判断上拉、下拉(暂时只用到了下拉)
- touchend 根据下拉、上拉位置判断是否达到下拉刷新、上拉加载更多
- @scroll.passive="onScrollFn($event)" 记录屏幕滚动,用来处理上滑时header rgba控制(沿用早期效果)
- touchmove 会触发onPulling,控制下拉时header opacity(参考目前淘宝效果)
- 正在刷新时触发refresh,此时有一个回弹效果
- 刷新完不管成功失败都有一个回调 refreshFinsh,作用是有时候没有拉到刷新区域页面回弹之后,相关的透明度可能无法还原
props
- offset 默认下拉高度
- bounce 回弹高度 offset - bounce
- maxScrollerHeight 最大下拉高度
- enableRefresh 是否开启刷新
- onRefresh 达到刷新条件调用的方法
- refreshFinsh 刷新完成后回调
- onScroll 向上滑动中回调
- onPulling 向下 下拉刷新中回调
- frequency 频率控制
- 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>
使用案例
注意事项
- ios touchmove移出屏幕可能不会触发touchend,可用touchcancel
- ios最外层容器默认是可以滚动的,未达到刷新条件的时候需要e.preventDefault()
存在问题
- 添加频率限制后,出现滑动完需等待一会才能继续滑动,这里的滑动未区分普通滑动/下拉/上拉
- 上拉加载更多TODO
- touchmove 没有使用节流函数
基于Vue手写一个下拉刷新的更多相关文章
- 利用Scrollow写一个下拉刷新
利用scrollView滑动的2个监听方法实现 //滑动结束时候 出发的方法 - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView ...
- 放弃antd table,基于React手写一个虚拟滚动的表格
缘起 标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反 ...
- Android如何定制一个下拉刷新,上滑加载更多的容器
前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...
- H5页面基于iScroll.js插件实现下拉刷新,上拉加载更多
前言 在我之前的项目中,页面总是干巴巴的,用户的体验不是特别完美,我也是一直觉得把设计师给到的psd做出来就好,很少考虑用户的感受.我喜欢看不同的App,操作每个步骤,观赏每个能和我互动的交互设计效果 ...
- 基于vue手写tree插件那点事
目录 iview提供的控件 手写控件 手写控件扩展 手写控件总结 # 加入战队 微信公众号 主题 Tree树形控件在前端开发中必不可少,对于数据的展示现在网站大都采取树形展示.因为大数据全部展示出来对 ...
- 原生js手机端触摸下拉刷新
废话不多说,直接上代码,这里感谢我的好朋友,豆姐 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- iscroll5实现一个下拉刷新上拉加载的效果
直接上代码!!! <!DOCTYPE html><html><head lang="en"> <meta charset="UT ...
- 用vue写一个仿app下拉刷新的组件
如果你用vue弄移动端的页面,那么下拉刷新还是比较常见的场景,下面来研究如何写一个下拉刷新的组件(先上图); 由于节省大家的时间,样式就不贴出来了. html结构也不必介绍了,直接看代码吧-.- &l ...
- 基于better-scroll封装一个上拉加载下拉刷新组件
1.起因 上拉加载和下拉刷新在移动端项目中是很常见的需求,遂自己便基于better-scroll封装了一个下拉刷新上拉加载组件. 2.过程 better-scroll是目前比较好用的开源滚动库,提供很 ...
随机推荐
- 入坑Vue
长期的后端数据开发着实有些枯燥无趣,项目完工,闲暇之际,最近一直在研究前端方面的东西,不得感叹,前端技术发展速度快的让人有些目不暇接,从jQuery开启的插件化时代,几乎许多网站都被jQuery支配, ...
- 工作中遇到的问题收集--.NET
一.拒绝访问 temp 目录.用来运行 XmlSerializer 的标识“IIS APPPOOL\MZJYMIS”没有访问 temp 目录的足够权限.CodeDom 将使用进程正在使用的用户帐户进行 ...
- 大话存储 3 - 七种磁盘RAID技术
RAID技术 Redundant Array of Independent Disks 由独立的磁盘组成的具有冗余特性的阵列. 有两个特性: 阵列:需要很多磁盘来组成 冗余:允许某块磁盘损坏之后,数据 ...
- 【转】学习Linux守护进程详细笔记
[原文]https://www.toutiao.com/i6566814959966093837/ Linux守护进程 一. 守护进程概述 守护进程,也就是通常所说的Daemon进程,是Linux中的 ...
- Beta阶段第一次冲刺
Beta阶段第一次冲刺 以后严格按照Git标准来,组员有上传Git的才有贡献分没有的为0 代码签入图 1.part1 -站立式会议照片 2.part2 -项目燃尽图 3.part3 -项目进展 1.正 ...
- 阿里八八Alpha阶段Scrum(2/12)
今日进度 叶文滔: 11.1:搭建Andriod Studio开发环境 11.2:已经完成Alpha阶段的APP整体框架搭建. 11.3:根据会议讨论内容,增加了模块标题栏返回键. 王国超: 完成了多 ...
- SVG绘制图形
一.SVG介绍 1.SVG指可伸缩矢量图片 2.SVG用来定义用于网络的基于矢量的图形 3.SVG使用XML格式定义图形 4.SVG图像在放大或改变尺寸的情况下其图形质量不会有损失 5.SVG是万维网 ...
- volatile和synchronized的区别与联系[转]
volatile是一个变量修饰符,而synchronized是一个方法或块的修饰符.所以我们使用这两种关键字来指定三种简单的存取变量的方式. int i1; ...
- Promise 模式解析:Promise模式与异步及声明式编程
一.构建流程 1.(异步)数据源(请求)的构建:Promise的构建并执行请求: 2.处理流程的构建:then将处理函数保存: 二.处理: 1.请求的响应返回: 2.调用后继处理流程. 三. 1.构建 ...
- 【转】numpy中mean和average的区别
转自:https://blog.csdn.net/Muzi_Water/article/details/85104941 mean和average都是计算均值的函数,在不指定权重的时候average和 ...