uniapp11-页面触底加载api-onReachBottom(懒加载表格分页)

uniapp11-页面触底加载api-onReachBottom(懒加载表格分页)

1、onReachBottom的介绍和认识

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

可在pages.json里定义具体页面底部的触发距离[onReachBottomDistance] (uniapp.dcloud.net.cn/collocation...%25EF%25BC%258C "https://uniapp.dcloud.net.cn/collocation/pages#globalstyle)%EF%BC%8C")

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

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

总结一下

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

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

应用场景

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

2、页面搭建

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

  • 搭建我们的页面

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

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

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

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

3、vue2的写法

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

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

        }
},

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

json 复制代码
{
			"path" : "pages/component/history/history",
			"style" : 
			{
				"navigationBarTitleText" : "历史界面",
				"onReachBottomDistance": 100
			}
}

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

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

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

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

思路:

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

xml 复制代码
<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的写法试试

xml 复制代码
<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之中使用官方给我们提供的方式进行使用

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

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

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

功能没问题! ok!

相关推荐
golang学习记2 分钟前
从0死磕全栈之Next.js 自定义 Server 指南:何时使用及如何实现
前端
张可爱2 分钟前
从奶茶店悟透 JavaScript:递归、继承、浮点数精度、尾递归全解析(通俗易懂版)
前端
梵得儿SHI18 分钟前
Vue 开发环境搭建全指南:从工具准备到项目启动
前端·javascript·vue.js·node.js·pnpm·vue开发环境·nvm版本管理
八月ouc32 分钟前
每日小知识点:10.14 webpack 有几种文件指纹
前端·webpack
苏琢玉35 分钟前
从 Hexo 到 Astro:重构我的个人博客
前端·hexo
街尾杂货店&41 分钟前
webpack - 单独打包指定JS文件(因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改)
前端·javascript·webpack
月光技术杂谈43 分钟前
用Deepseek 实现一个基于web的扣图应用
前端·javascript·html5·ccs·tensorflow.js·canvas api
Q_Q5110082851 小时前
python+uniapp基于微信小程序的学院设备报修系统
spring boot·python·微信小程序·django·flask·uni-app
李慕婉学姐1 小时前
【开题答辩过程】以《自习室预约微信小程序》为例,不会开题答辩的可以进来看看
微信小程序·小程序