导语：在日测的开发过程中，常常会碰到页面须要渲染大量数据的状况，这时候就须要用到滚动加载性能，上面总结一下办法。
目录
- 原理剖析
- 实战演练
- 案例展现
原理剖析
应用@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 端成果
最初
以上就是实现滚动触底加载的次要内容，有不足之处，请多多斧正。