hooks taro 下拉刷新_小程序自定义下拉刷新(Taro版)
在考虑实现自定义的下拉刷新组件的时候,首先要明确,这个算是一种hack方案。并不是说自定义的有多么好,反而自定义的下拉刷新在android下会有细微的卡顿(我这种实现方式)。所以尽量还是用小程序自带的吧。
这个实现主要是参考艾伦大佬的组件。
实现方式
我们将页面分为下面的结构
正常的时候下拉刷新区域的高度为0。
然后我们通过scroll-view的scrollToUpeper事件来标记开始下滑。
通过touchstart来记录我们手指的初始位置。
通过监听列表区域的touchmove事件,来不断的计算手指移动距离。
touchend事件来触发更新事件。
我们将页面分为几种状态:
enum refreshStatus {
INIT,
PULL_DOWN,
READY_REFRESH,
LOADING,
DONE
}
复制代码
大致流程如下:
页面加载之后是INIT状态。
当触发了scroll-view的scrollToUpeper事件,我们记录一个标志位isUpper,在scroll-view的scroll事件触发时,isUpper记为false
当我们列表页滑倒顶部的时候再下拉,页面进入了PULL_DOWN状态。 一般会设置一个有效的下拉距离,称之为validHeight,当下拉的高度不足validHeight时,这时候松开手指,页面回弹不刷新。
当我们继续下拉,距离超过了validHeight这时候进入了READY_REFRESH状态。
在READY_REFRESH状态的时候放开手指,页面刷新,进入LOADING状态。
页面刷新完毕之后,进入DONE状态,刷新区域高度变为0
我们还需要设置一个最大下拉高度,以及在READY_REFRESH状态,手指放开后回弹到刷新区域的最大高度。
至此我们可以写出touchend、touchstart、touchmove 代码大致如下:(详细代码)
handleTouchMove(e) {
const curTouch = e.touches[0]
const moveY = (curTouch.pageY - this.lastTouchY) * .3
if(
!this.isUpper ||
moveY < 0 ||
moveY > 2 * this.maxHeight ||
this.state.refreshStatu === refreshStatus.LOADING
) {
return
}
if(moveY < this.validHeight) {
this.setState({
refreshHeight: moveY,
refreshStatu: refreshStatus.PULL_DOWN
})
} else {
this.setState({
refreshHeight: moveY,
refreshStatu: refreshStatus.READY_REFRESH
})
}
}
handleTouchStart(e) {
const curTouch = e.touches[0]
this.lastTouchY = curTouch.pageY
}
handleTouchEnd() {
this.lastTouchY = 0
if(this.state.refreshStatu === refreshStatus.READY_REFRESH) {
this.setState({
refreshStatu: refreshStatus.LOADING,
refreshHeight: this.maxHeight
})
if (this.props.onRefresh) {
this.props.onRefresh()
}
} else {
this.setState({
refreshHeight: 0
})
}
}
handleScrollToUpeper() {
this.isUpper = true
}
handleScroll() {
this.isUpper = false
}
复制代码
除此之外,我们还需要在调用的页面上加上disableScroll: true的配置,以解决ios整个页面跟着下滑的问题。
对比原生的下拉刷新
android下会有稍微的卡顿,ios和模拟器体验比较好。
可以页面局部的下拉刷新。刷新的样式也可以定制化。
结语
其实在ios下还有一种实现方式,利用的就是ios的scroll-view在拉到顶部的时候还可以往下拉(橡皮筋效果),这时候我们可以把刷新的区域放在scroll-view可是区域上面。性能上肯定要比不断的计算高度来的要好。
但是有两个问题:
不能再页面中局部使用,因为局部使用的话就需要禁用页面滚动,这也跟着禁用了ios的橡皮筋效果,从而使我们的下拉刷新不能用
手指放开之后有个轻微的回弹效果,虽然无伤大雅,但是感觉还是挺奇怪的。
这种实现方式下次我也贴出来,也可以参照艾伦的博客,他说的比较详细,我也主要是参考他的代码来实现的。
hooks taro 下拉刷新_小程序自定义下拉刷新(Taro版)相关推荐
- php 类似微信下拉菜单,微信小程序模拟下拉菜单开发实例
本文主要和大家分享微信小程序模拟下拉菜单开发实例,希望能帮助到大家. 一.知识点 1.实现动态显示和隐藏某个控件 列表1data:{ open:false }, showitem:function() ...
- taro 请务必在小程序页面中完善页面基础信息_小程序自定义导航栏(完美适配所有手机)...
背景 在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中 页面的title只支持纯文本级别的样式控制,不能够做更 ...
- ios微信小程序下拉刷新怎么配_[wx]微信小程序自定义下拉刷新
需求: 在小程序内存在列表等形式的页面内增加下拉刷新功能,提高用户体验感,加强界面操作与交互性: 实现方法: 1.小程序提供的下拉刷新(无法自定义刷新动画) 在页面设置内开启下拉(单独页面设置): { ...
- 安卓小程序 自定义下拉刷新_支付宝小程序设计设计指南
本篇<设计指南>从7个维度分析: 导航(架构清晰,指引明确).界面(明辨主次,重点明确).流程(流程明确,避免打扰).引导(操作向导,降低成本).反馈(反馈及时,减少焦虑).容错(用户可控 ...
- php 类似微信下拉菜单,微信小程序实现下拉框(附代码)
微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果 下面来看一下代码: 首先WXML {{selectData[index]}} {{item}} 然后WXSS(如 ...
- 微信小程序——自定义下拉框
微信小程序本身并没有自带的下拉框组件,我们可以通过view标签自定义一个下拉框.(仅供参考) 目录 文件目录 实现效果 实现逻辑 设置数据 设置默认选项 实现弹出下拉框 提供选项值 设置所选值 源码 ...
- 微信小程序webview页面不刷新,webview缓存页面不刷新,小程序webview页面不刷新,小程序webview地址追加参数页面还是缓存,解决办法
项目需求,在微信小程序首页的 banner 图,打开公司官网,这个功能很好实现,就是专门整个 webview 组件所在页面,以后凡是有这种需求的都跳转到这个页面,只需要切换不同的路由地址就行了,可是最 ...
- ie9 java小程序设置_小程序 自定义导航栏
一.概念 上面整体就是自定义导航栏的区域(包括状态栏) 胶囊接口 /*获取菜单按钮(右上角胶囊按钮)的布局位置信息.坐标信息以屏幕左上角为原点 */ wx.getMenuButtonBoundingC ...
- swiper高度自适应_小程序自定义导航自适应高度
小程序导航条自定义,高度自适应iphoneX等刘海手机和其他手机,开启导航自定义需要在app.json文件里将window的 navigationStyle属性设置为: custom,开启导航自定义可 ...
最新文章
- 智能驾驶操作系统OS
- 老婆给当程序员的老公打电话:今天下班顺路买斤元宵……
- NodeJs开发微信公众号(一)
- 阿里云 Caused by: redis.clients.jedis.exceptions.JedisDataException: ERR invalid password
- Jboss7.1.1配置SSL
- 吴良超 融合 cnn+lstm
- 深度学习核心技术精讲100篇(五十六)- 自动驾驶感知技术的实践与探索
- python函数作用域包括局部变量和参数_python函数变量的作用域声明(全局变量和局部变量)...
- .NET Core容器化开发系列(一)——Docker里面跑个.NET Core
- 《Python Cookbook 3rd》笔记(2.11):删除字符串中不需要的字符
- 终于用上gcc-4.1编译的系统了
- 【Linux分享】Linux常用命令+教程分享
- 应用传送网络(ADN):率先架起“东数西算”的“高速公路”
- UI设计干货素材|聊天APP界面,临摹学习进步快
- 【bzoj2038】[2009国家集训队]小Z的袜子(hose) 莫队算法
- java 数组不重复_java如何找出数组中的不重复数字
- Hive date_format函数入门
- 大数据讲课笔记1.5 使用Vim编辑器
- vue动态加载页面组件
- 数据库中的主键与外键的关系
热门文章
- 《方与圆》 ---丁远峙
- (操作系统题目题型总结)第一章:操作系统概论
- LABVIEW通过串口VISA通讯松下FP系列PLC.读取写入寄存器,辅助继电器,实际项目应用
- 3.使用GSYVideoPlayer实现仿抖音视频播放以及点赞飘心效果
- java生成excel下载_java生成excel并下载功能
- 用yate2实现软VoIP语音通话(SIP协议)
- 图像分割方法分享 | 基于优选集成ConvNet的脑癌图像分割方法
- oracle数据库12cocp培训教程,ORACLE OCP认证 12C课程大纲
- 计算机基础教案文档,计算机基础知识教案
- java计算机毕业设计中小学生错题管理系统源码+数据库+系统+部署+lw文档