基于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是目前比较好用的开源滚动库,提供很 ...
随机推荐
- 大于2t的磁盘分区,并格式化ext4挂载
1:MBR分区表:(MBR含义:主引导记录) 所支持的最大卷:2T (T; terabytes,1TB=1024GB) 对分区的设限:最多4个主分区或3个主分区加一个扩展分区. 2:GPT分区表:(G ...
- Lorem 占位符
Web开发者通常用lorem ipsum text来做占位符,占位符就是占着位置的一些文字,没有实际意义. 为什么叫lorem ipsum text呢? 是因为lorem ipsum是古罗马西塞罗谚语 ...
- 转:基于InstallShield2013LimitedEdition的安装包制作
InstallShield Limited Edition for Visual Studio 2013 图文教程(教你如何打包.NET程序) InstallShield Limited Edit ...
- 美式九球比赛规则 (Nine-ball)
九球比赛规则 (Nine-ball) 九球比赛规则 一.器材: 1.台面规格: a.内沿长254厘米. b.内沿宽127厘米. c.高80厘米. d.角袋口内沿最近距离为10.5厘米(±1毫米),腰袋 ...
- C++基础算法学习——生理周期
人有体力.情商.智商的高峰日子,它们分别每隔23天.28天和33天出现一次.对于每个人,我们想知道何时三个高峰落在同一天.给定三个高峰出现的日子p,e和i(不一定是第一次高峰出现的日子),再给定另一个 ...
- mysql数据导入导出与数据表优化
一.数据导入 mysqlimport -uroot oa d:/aa.txt --fields-terminated-by=, --fields-optionally-enclosed-by= --l ...
- python3: 文件与IO
1.读写文本数据 # Write chunks of text data with open('somefile.txt', 'wt') as f: f.write(text1) # Redirect ...
- Java AWT
AWT是抽象窗口工具包,是API为Java 程序提供的建立图形用户界面GUI (Graphics User Interface)工具集,AWT可用于Java的applet和applications中. ...
- 网络编程_TCP协议_客户端与服务端
客户端发数据到服务端 Tcp传输,客户端建立的过程. 1,创建tcp客户端socket服务.使用的是Socket对象.建议该对象一创建就明确目的地.要连接的主机. 2,如果连接建立成功,说明数据传输通 ...
- mod_php和mod_fastcgi和php-fpm的介绍,对比和性能数据
1.php中fastcgi和php-fpm是什么东西 最近在研究和学习php的性能方面的知识,看到了factcgi以及php-fpm,发现我对他们是少之又少的理解,可以说几乎是一无所知,想想还是蛮可怕 ...