uniapp实现滚动触底加载项目实战
更新时间:2023年09月19日 09:14:23 作者:MarkGuan
这篇文章主要为大家介绍了uniapp实现滚动触底加载项目实战方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
导语
在日测的开发过程中,经常会碰到页面需要渲染大量数据的情况,这时候就需要用到滚动加载功能,下面总结一下方法。
原理分析
使用@scrolltolower
事件来监听滚动到底部,然后加载下一页的数据。
实战演练
模板页面
<scroll-view :scroll-y="true" class="block-main block-two-level block-pad" @scrolltolower="scrollBottom"> <view class="scroll-ls" v-for="(item, index) in scrollInfo.list" :key="index"> {{ item }} </view> <uni-load-more v-if="scrollInfo.list.length" :status="scrollInfo.loading"></uni-load-more> </scroll-view>
样式编写
.scroll-ls { margin-top: 20rpx; padding: 50rpx 0; text-align: center; background: $f8; }
脚本使用
- 定义数据
// 滚动列表 const scrollInfo = reactive({ originList: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, ], list: [], pageInfo: { page: 1, size: 8, pages: 0, }, loading: "more", });
- 方法调用
// 滚动到底部 function scrollBottom() { console.log("滚动到底部!"); if (scrollInfo.pageInfo.page < scrollInfo.pageInfo.pages) { scrollInfo.pageInfo.page++; scrollInfo.loading = "loading"; getList(); } else { scrollInfo.loading = "noMore"; } }
- 获取列表
// 获取列表 function getList() { if (scrollInfo.pageInfo.page <= 1) { show.value = true; } let data = proxy.$apis.utils.splitData(scrollInfo.originList, 8); scrollInfo.pageInfo.pages = data.pages; setTimeout(() => { if (scrollInfo.pageInfo.page <= 1) { scrollInfo.list = data.list[scrollInfo.pageInfo.page - 1]; setTimeout(() => { show.value = false; }, 500); } else { scrollInfo.list = [...scrollInfo.list, ...data.list[scrollInfo.pageInfo.page - 1]]; } scrollInfo.loading = scrollInfo.pageInfo.page < scrollInfo.pageInfo.pages ? "more" : "noMore"; }, 1000); }
案例展示
h5 端效果
小程序端效果
APP 端效果
最后
以上就是uniapp实现滚动触底加载项目实战的详细内容,更多关于uniapp滚动触底加载的资料请关注脚本之家其它相关文章!
相关文章
bootstrap table表格插件之服务器端分页实例代码
Bootstrap Table是基于Bootstrap的轻量级表格插件,只需要简单的配置就可以实现强大的支持固定表头、单复选、排序、分页、搜索以及自定义表头等功能。这篇文章主要介绍了bootstrap table表格插件之服务器端分页实例代码,需要的朋友可以参考下2018-09-09JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
这篇文章主要介绍了JavaScript设计模式之工厂模式和抽象工厂模式,结合实例形式分析了工厂模式的功能、定义、相关问题解决方法,并分析抽象工厂模式与工厂模式的不同之处,需要的朋友可以参考下2018-07-07微信小程序tabBar模板用法实例分析【附demo源码下载】
这篇文章主要介绍了微信小程序tabBar模板用法,结合具体实例形式分析了tabBar模板的定义、配置、引用等相关操作技巧,需要的朋友可以参考下2017-11-11
最新评论