導(dǎo)語：在日測(cè)的開發(fā)過程中，經(jīng)常會(huì)碰到頁面需要渲染大量數(shù)據(jù)的情況，這時(shí)候就需要用到滾動(dòng)加載功能，下面總結(jié)一下方法。

目錄

• 原理分析
• 實(shí)戰(zhàn)演練
• 案例展示

原理分析

使用@scrolltolower事件來監(jiān)聽滾動(dòng)到底部，然后加載下一頁的數(shù)據(jù)。

實(shí)戰(zhàn)演練

模板頁面

<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;
}

腳本使用

• 定義數(shù)據(jù)

// 滾動(dòng)列表
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",
});

• 方法調(diào)用

// 滾動(dòng)到底部
function scrollBottom() {console.log("滾動(dòng)到底部!");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 端效果
  

最后

以上就是實(shí)現(xiàn)滾動(dòng)觸底加載的主要內(nèi)容，有不足之處，請(qǐng)多多指正。