滚动界面预加载的实现原理
来源:互联网 发布:离坚白 知乎 编辑:程序博客网 时间:2024/06/05 11:28
滚动界面预加载的实现原理
需求描述:
- 在 UI 还没有滚动要列表的 最底部时,触发加载数据
- 用户在下拉列表的过程中预加载数据,用户感知不到数据加载过程,体验流畅
核心点:判断预加载的时机
- 列表的当前窗口, 在距离 顶部/底部 小于 阀值 的时候触发
- 正在预加载时,不再加载数据
- 数据全部加载之后,不再加载数据
向下滚动预加载实现:
- 首先要监听列表的滚动事件
- 要能获取到列表的当前位置,和总高度
- 设定阀值
- 当列表的监听事件触发的时候,总高度 - 当前高度 < 阀值,执行预加载
- 执行预加载事件时,做一个标记,标记是否可进行预加载,则 4 的判断,修正如下:总高度 - 当前高度 < 阀值 && 可以预加载
- 数据加载完成之后,失败时、重置预加载标志,成功时、若加载出来的数据数量 >= 预加载的数据数量,则重置预加载标志,否则不动
1、2、4点实现核心点1,5、6点实现核心点2、3
Qt代码:
void ChannelTopArticleListView::init() { connect(&_innerListView, &ListView::scrolled, this, &ChannelTopArticleListView::onScrolled);}/// 滚动时触发此函数void ChannelTopArticleListView::onScrolled() { /// 针对实现点5:正在加载时,不再加载数据 QMutexLocker locker(&_cloudLoadedMutex); if (_cloudLoaded) { return; } /// 计算当期视图位置、阀值,判断是否可以预加载 int32 totalHeight = _innerListView.listViewHeight(); int32 current = _innerListView.currentListViewBottomPos(); /// 阀值 3 页 int32 preloadHeight = _innerListView.height() * 3; if (totalHeight - current < preloadHeight) { preloadTopArticle(); _cloudLoaded = true; }}
阅读全文
0 0
- 滚动界面预加载的实现原理
- 滚动加载图片(懒加载)实现原理
- 滚动加载图片(懒加载)实现原理
- 滚动加载图片(懒加载)实现原理
- (滚动加载图片)懒加载实现原理
- Scroller的滚动实现原理
- 自定义带下拉刷新和滚动加载的ListView控件原理分析和实现
- 蓝懿 滚动界面的实现
- 移动端无限滚动加载 js实现原理
- 页面滚动时,异步加载的实现
- Android Scroller的滚动实现原理
- 全屏滚动的原理及实现
- jQuery实现滚动加载
- 实现界面图片的延时加载
- 图片懒加载(滚动加载)原理
- AngularJs实现进入聊天界面时的自动滚动
- 滚动条滚动,实现延迟加载
- cocos2dx中滚动界面和小滚动条同步的实现
- 读Spring源码的一些杂乱思绪(二)
- @Value读取配置文件,中文字符乱码
- const的普通用法及其在对象中的使用
- MPI消息传递接口(2)——信息传输
- 2017数学建模总结
- 滚动界面预加载的实现原理
- C#--实例选号器--实现删除和清空
- 士兵的数字游戏
- 关于如何写代码
- mysql和oracle的区别
- 过拟合样例代码以及几种算法的多项式过拟合比较
- windows10下的caffe框架的编译
- python爬虫爬取豆瓣电影榜单
- java