导语:在日测的开发过程中,经常会碰到页面需要渲染大量数据的情况,这时候就需要用到滚动加载功能,下面总结一下方法。
目录
- 原理分析
- 实战演练
- 案例展示
原理分析
使用@scrolltolower
事件来监听滚动到底部,然后加载下一页的数据。
实战演练
模板页面
html
<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>
样式编写
scss
.scroll-ls {
margin-top: 20rpx;
padding: 50rpx 0;
text-align: center;
background: $f8;
}
脚本使用
- 定义数据
js
// 滚动列表
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",
});
- 方法调用
js
// 滚动到底部
function scrollBottom() {
console.log("滚动到底部!");
if (scrollInfo.pageInfo.page < scrollInfo.pageInfo.pages) {
scrollInfo.pageInfo.page++;
scrollInfo.loading = "loading";
getList();
} else {
scrollInfo.loading = "noMore";
}
}
- 获取列表
js
// 获取列表
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 端效果
最后
以上就是实现滚动触底加载的主要内容,有不足之处,请多多指正。