uniapp實現(xiàn)滾動觸底加載項目實戰(zhàn)

更新時間：2023年09月19日 09:14:23 作者：MarkGuan

這篇文章主要為大家介紹了uniapp實現(xiàn)滾動觸底加載項目實戰(zhàn)方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

導語

在日測的開發(fā)過程中，經常會碰到頁面需要渲染大量數(shù)據(jù)的情況，這時候就需要用到滾動加載功能，下面總結一下方法。

原理分析

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

實戰(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ù)

// 滾動列表
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);
}