uniapp11-页面触底加载api-onReachBottom（懒加载表格分页）

1、onReachBottom的介绍和认识

先来看一下onReachBottom这个api，官方给我们的介绍也非常的简单

可在pages.json里定义具体页面底部的触发距离[onReachBottomDistance] (uniapp.dcloud.net.cn/collocation…

比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。

如使用scroll-view导致页面没有滚动，则触底事件不会被触发

总结一下

其实就是非常简单,当页面触底到一定的位置时候，触发滚动和方法。 onReachBottom 就是一个页面生命周期函数，用于监听页面滚动到页面底部时触发的事件。具体来说，onReachBottom 是在页面滚动到底部时触发的生命周期函数，类似于砸门网页开发中的 window.onscroll 事件

思考一下

那是不是我们可以使用它来进行我们的千万级别数据的懒加载呢，总不可能你有一千数据，我就直接后台给你返回一千数据吧！

应用场景

在比较常见的项目之中，一般我们会把这种应用于列表的懒加载上，然后对于用户体验进行优化！尤其是含有分页的时候，因为正常我们数据过多不可能一个一个进行加载！

2、页面搭建

接下来我们就尝试一下官方给我们介绍的onReachBottom的使用

• 搭建我们的页面

我们先在项目之中写一个历史界面，名字上我们就叫做history，方便我们尝试这个api

写完了以后注意去我们的页面上配置触底距离！！！！！！！！重要！！！！

• 在pages.json里面配置触底的距离

接下来直接去我们的配置界面去配置一下触底加载的距离需要多少，话不多说，我们直接上代码

3、vue2的写法

这里我们先简单看一下采用vue2

onReachBottom() {
        if (this.totalCount > this.msg.length) {
                this.form.pageNum++
                this.onlistin(); //执行的方法
        } else {

        }
},

这里我们简单调整为触底为100的时候然后触发这个页面滚动到底部的onReachBottom

{
			"path" : "pages/component/history/history",
			"style" : 
			{
				"navigationBarTitleText" : "历史界面",
				"onReachBottomDistance": 100
			}
}

这个历史我们还是跟之前差不多放在首页部分

<view>
  <button @click="topage('/pages/component/history/history')">历史记录</button>
</view>

然后我们还是在首页点击这个历史记录，然后去我们的历史界面

接下来我们去完善一下历史界面然后看看效果

思路：

当我们首次进入页面的时候，我们先渲染10条数据，之后我们每次下拉到底部的时候就开始刷新，并且往我们之前的部分添加10条数据，达到懒加载的效果。

<template>
  <view class="container">
    <view v-for="(item, index) in itemList" :key="index" class="item">
      {{ item }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      itemList: [],
      page: 1,
    };
  },

  mounted() {
    // 监听页面滚动到底部事件
    // this.$onReachBottom(this.handleReachBottom);
	this.fetchData();
  },
  onReachBottom() {
	  console.log('11111');
  	   this.fetchData();
  },

  methods: {
    fetchData() {
      // 模拟异步加载数据
      setTimeout(() => {
        const newData = Array.from({ length: 10 }, (_, i) => `Item ${this.itemList.length + i}`);
        this.itemList = [...this.itemList, ...newData];
      }, 1000);
    },
  },
};
</script>

<style>
.container {
  padding: 20px;
}

.item {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 4px;
  text-align: center;
}
</style>

尝试一下我们使用这个进行懒加载的效果

效果还不错！挺完美的！

4、vue3的写法

接下来我们改成vue3的写法试试

<template>
  <view class="container">
    <view v-for="(item, index) in itemList" :key="index" class="item">
      {{ item }}
    </view>
  </view>
</template>

<script setup>
	import { onMounted ,ref} from "vue";
	const itemList=ref([]);
	const page=ref(1);
 
 onMounted(()=>{
	 fetchData();
 })

  const onReachBottom=()=> {
  	  console.log('11111');
  	   fetchData();
  }
  
 const fetchData=()=> {
   // 模拟异步加载数据
   setTimeout(() => {
     const newData = Array.from({ length: 10 }, (_, i) => `Item ${itemList.value.length + i}`);
     itemList.value = [...itemList.value, ...newData];
   }, 1000);
 }
</script>

<style>
.container {
  padding: 20px;
}

.item {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 4px;
  text-align: center;
}
</style>

问题分析

这里我们发现虽然可以直接用，但是监测不到

所以我猜测是可能在uniapp之中进行了封装，所以这里我们并没有全局注册，所以并没有办法直接使用

问题处理

这里我们直接尝试一下在uniapp之中使用官方给我们提供的方式进行使用

这里我们首先需要引入一下，然后再在页面之中进行使用

import { onLoad, onShow ,onReachBottom} from "@dcloudio/uni-app";
 onReachBottom(() => {
    console.log('11111');
     fetchData();
 })

再次调用然后尝试一下。ok！毫无问题

功能没问题！ ok！