广州各类外贸网站,网络设计涉及到的核心标准是,qq哪家公司开发的,单页网站定义需求/背景
在我们的业务场景中#xff0c;列表的加载使用easy_refresh组件#xff1a;
https://pub.dev/packages/easy_refresh
大概效果是往上滑动到一定的offset会触发一个上滑加载#xff0c;可以触发一些网络请求拉取列表后面的数据来展示。
这种模式一般在一页翻完…需求/背景
在我们的业务场景中列表的加载使用easy_refresh组件
https://pub.dev/packages/easy_refresh
大概效果是往上滑动到一定的offset会触发一个上滑加载可以触发一些网络请求拉取列表后面的数据来展示。
这种模式一般在一页翻完以后才会触发加载此时需要等待加载完以后才能看到新的数据。现在的需求是想要在即将滑到当前页面底部的时候预先加载后面的数据这样表面上看来没有了中间的等待感可以提升用户体验。
思路
首先easy_refresh组件没有提供“预加载”相关的参数所以我们需要自己去实现。分析需求我们如何得知触发预加载的这个时机呢可以比较容易的想到如果可以监听到滑动的距离那么就可以根据滑动距离触发加载比如当监听到用户已经上滑了约一个手机高度那么高一页时触发预加载。
监听滑动的offset可以联想到使用ScrollController实现。
用法
double _currentOffset 0; // 记录上一次触发了预加载的位置
ScrollController scrollController; // 列表controller赋给用于展示元素的ListView
EasyRefreshController refreshController EasyRefreshController(controlFinishLoad: true, controlFinishRefresh: true); // EasyRefresh组件的controller设置在对应位置监听scrollController:
scrollController.addListener(() preLoad());preLoad方法 /// 通过检查当前滑动的位置触发加载.void preLoad() async {if (scrollController.offset - _currentOffset appHeight) {_currentOffset scrollController.offset;if (!isNoMore) {await updateItems(); // 加载一页数据}if (isNoMore) refreshController.finishLoad(IndicatorResult.noMore);}}isNoMore: 判断是否为最后一页不同的业务场景可能不一样我是根据拉取的数据数量是否小于我要求的数量来判断的比如我请求api的时候要拉取20条数据如果此时返回的不足20条则说明已经拉到了最后一页。 refreshController: 赋给EasyRefresh组件这里要finishLoad是因为在EasyRefresh组件中也有onLoad回调原本的上拉加载和预加载是同时要有的为了避免预加载到最后一页再上滑的时候又发多余的请求在这里需要及时将加载状态设为IndicatorResult.noMore。 appHeight: 屏幕高度如果项目里面有使用Getx则计算方式为 double appHeight View.of(Get.context!).physicalSize.height / Get.pixelRatio;这里使用appHeight作为判断标准是与业务相关的这个时候根据我们api的速度等情况上滑起来比较丝滑即当往上滑动了一个屏幕这么多的距离时触发预加载。这个参数可以根据实际情况设置的大一点或小一点。
