江阴网站推广,如何做移动支付网站,营销网络建设的好处,淘宝客api采集发布到wordpress导语#xff1a;在日测的开发过程中#xff0c;经常会碰到页面需要渲染大量数据的情况#xff0c;这时候就需要用到滚动加载功能#xff0c;下面总结一下方法。 目录
原理分析实战演练案例展示
原理分析
使用scrolltolower事件来监听滚动到底部#xff0c;然后加载下一… 导语在日测的开发过程中经常会碰到页面需要渲染大量数据的情况这时候就需要用到滚动加载功能下面总结一下方法。 目录
原理分析实战演练案例展示
原理分析
使用scrolltolower事件来监听滚动到底部然后加载下一页的数据。
实战演练
模板页面
scroll-view:scroll-ytrueclassblock-main block-two-level block-padscrolltolowerscrollBottomview classscroll-ls v-for(item, index) in scrollInfo.list :keyindex {{ item }} /viewuni-load-more v-ifscrollInfo.list.length :statusscrollInfo.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 端效果
最后
以上就是实现滚动触底加载的主要内容有不足之处请多多指正。
