uinapp触底与下拉时间触发的使用

在UniApp中,onReachBottom 和 onPullDownRefresh 是两个重要的生命周期函数,分别用于处理页面滚动到底部时触发的事件和下拉刷新时触发的事件。

  1. 在页面的 .vue 文件中:
<template>  
  <view>  
    <scroll-view  
      scroll-y="true"  
      @scrolltolower="onReachBottom"  
      style="height: 100vh;"  
    >  
      <view v-for="(item, index) in list" :key="index">  
        {{ item }}  
      </view>  
      <!-- 用于加载更多的占位符,可根据需要自定义样式 -->  
      <view v-if="isLoading" class="loading-more">加载中...</view>  
    </scroll-view>  
  </view>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      list: [], // 列表数据  
      page: 1, // 当前页码  
      pageSize: 10, // 每页数据条数  
      isLoading: false, // 是否正在加载数据  
    };  
  },  
  onLoad() {  
    this.fetchData(); // 页面加载时获取初始数据  
  },  
  methods: {  
    fetchData() {  
      // 假设 fetchDataFromServer 是你从服务器获取数据的函数  
      this.isLoading = true; // 开始加载数据时设置标志位  
      fetchDataFromServer(this.page, this.pageSize).then(data => {  
        this.list = this.list.concat(data); // 合并新数据到列表  
        this.page += 1; // 页码自增  
        this.isLoading = false; // 数据加载完成,设置标志位为 false  
      }).catch(error => {  
        console.error('加载数据失败', error);  
        this.isLoading = false; // 加载失败也设置标志位为 false  
      });  
    },  
    onReachBottom() {  
      // 滚动到底部时触发,如果不在加载中,则继续加载数据  
      if (!this.isLoading) {  
        this.fetchData();  
      }  
    },  
    onPullDownRefresh() {  
      // 下拉刷新时触发  
      this.page = 1; // 重置页码为第一页  
      this.list = []; // 清空列表数据  
      this.fetchData(); // 重新获取数据  
    },  
  },  
  onUnload() {  
    // 页面卸载时,确保停止任何可能还在进行的异步操作  
    this.isLoading = false;  
  },  
};  
</script>  
  
<style>  
.loading-more {  
  text-align: center;  
  padding: 20rpx;  
}  
</style>
  1. 在页面的 pages.json 配置文件中:
{  
  "navigationBarTitleText": "我的list列表",  
  "enablePullDownRefresh": true // 开启下拉刷新  
}

自学东西,才过的坑。
在这里插入图片描述
唯有美景,才能抚慰我的心灵!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/500145.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

React Native框架开发APP,安装免费的图标库(react-native-vector-icons)并使用详解

一、安装图标库 要使用免费的图标库&#xff0c;你可以使用 React Native Vector Icons 库。 首先&#xff0c;确保你已经安装了 react-native-vector-icons&#xff1a; npm install --save react-native-vector-iconsnpm install --save-dev types/react-native-vector-ic…

Arcgis中使用NDVI阈值法提取农田shape

首先有一幅NDVI影像TIFF&#xff0c;对其查看农田上的NDVI范围&#xff0c;大概是0.1以上&#xff0c;因为是12月份&#xff0c;小麦播种完1-2个月&#xff0c;此时NDVI并不是很高&#xff0c;但是树林基本叶子掉落了&#xff0c;所以比较好提取农田。 打开地图代数-栅格计算器…

OpenHarmony OpenCV应用样例开发

背景 OpenCV 介绍 OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个开源的计算机视觉和机器学习软件库。它由一系列的 C 函数和少量 C 类构成&#xff0c;同时提供 Python、Java 和 MATLAB 等语言的接口&#xff0c;实现了图像处理和计算机视觉方面…

一则关于Go的高级构建指北

本文将探索Golang高级构建技巧&#xff0c;从而有助于创建更高效的二进制文件。 构建选项 以下是 go build 命令最常用的一些选项&#xff1a; -o: 指定输出文件名。默认输出文件名是主软件包的名称&#xff0c;在 Windows 系统中会自动添加 .exe 后缀。-v: 详细输出。该选项…

产品经理的进阶之路

1. 前言 本文深入剖析了产品经理这一职业从产品专员起步,逐步晋升为产品经理、高级产品经理,直至产品总监的整个职业发展路径。在每个阶段,产品经理都需承担不同的工作职责,展现出独特的职业特点。 2. 产品专员 关键词【产品需求/原型/文档/沟通】 对于初步接触产品领域…

Remote Desktop Manager for Mac:一站式远程桌面管理,高效掌控所有连接!

Remote Desktop Manager for Mac是一款专门用于远程桌面管理的软件。它的主要功能包括&#xff1a; 远程连接管理&#xff1a;Remote Desktop Manager允许用户集中管理所有远程连接&#xff0c;包括远程桌面、远程服务器、虚拟机、云服务等&#xff0c;用户可以一次性登录并管理…

Pocket 2荧光拍摄的几个有趣玩法

荧光是现象&#xff0c;当某种常温物质经某种波长的入射光&#xff08;通常是或&#xff09;照射&#xff0c;吸收光能后进入&#xff0c;并且立即退激发并发出出射光&#xff08;通常波长比入射光的波长&#xff0c;原先看不见的短波长紫外线&#xff0c;变成在可见光波段的可…

java算法day38 | 动态规划part01 ● 509. 斐波那契数 ● 70. 爬楼梯 ● 746. 使用最小花费爬楼梯

理论基础 递归五部曲&#xff1a; 确定dp数组&#xff08;dp table&#xff09;以及下标的含义确定递推公式dp数组如何初始化确定遍历顺序举例推导dp数组 509. 斐波那契数 动规五部曲&#xff1a; 这里我们要用一个一维dp数组来保存递归的结果 确定dp数组以及下标的含义 dp…

Linux 环境安装 Elasticsearch 8.X

安装前说明 首先确定操作系统&#xff0c;在Linux发行版上执行uname -a查看具体系统。我是Ubuntu系统&#xff0c;可以用直接用apt-get安装&#xff0c;也可以下载tar.gz包手动安装。使用apt-get安装更方便快速&#xff0c;但不同的文件会被安装到不同的目录&#xff0c;不方便…

Java虚拟机(JVM)知识点总结

一. Java内存区域 1. JVM的内存区域划分&#xff0c;以及各部分的作用 可分为运行时数据区域和本地内存&#xff0c;按照线程私有和线程共享分类&#xff1a; 线程私有&#xff1a;程序计数器、虚拟机栈、本地方法栈。 线程共享&#xff1a;堆、方法区、直接内存。 JDK1.7…

Web APIs知识点讲解(阶段四)

DOM- 事件高级 一.回顾(购物车案例) <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><meta http-equiv&qu…

NRF52832修改OTA升级时的bootloader蓝牙MAC

NRF52832在OTA升级时&#xff0c;修改了APP的蓝牙MAC会导致无法升级&#xff0c;原因是OTA程序的蓝牙MAC没有被修改所以手机扫描蓝牙时无法连接 解决办法 在bootloader的程序里面加入修改蓝牙mac地址的代码实现原理&#xff1a; 在bootloader蓝牙广播开启之前修改蓝牙mac 通…

接口自动化框架搭建(九):接入钉钉消息通知

1&#xff0c;jenkins安装钉钉插件 2&#xff0c;在钉钉群聊设置机器人 3&#xff0c;jenkins配置钉钉 根据情况选择&#xff1a; 除了这些&#xff0c;其他不用配置&#xff0c;配置完成点击确认 4&#xff0c;项目配置 添加后保存 5&#xff0c;测试下效果 构建完成后&a…

缓存数据库的意义、作用与种类详解

在现代计算机应用中&#xff0c;数据访问的性能往往是关键因素之一。随着数据量的增加和复杂应用的兴起&#xff0c;数据库的访问成本逐渐成为瓶颈。为了提高应用程序的响应速度、减轻后端数据库的负载压力&#xff0c;缓存数据库应运而生。 什么是缓存数据库&#xff1f; 缓存…

Cesium.js综合实验

Cesium.js综合实验 1 概述 Cesium是一个跨平台、跨浏览器的展示三维地球和地图的开源 JavaScript 库&#xff0c;是AGI公司计算机图形开发小组与2011年研发的三维地球和地图可视化开源JavaScript库&#xff0c;Cesium一词来源于化学元素铯&#xff0c;铯是制造原子钟的关键元…

深度学习| DiceLoss解决图像数据不平衡问题

图像数据不平衡问题 图像数据不平衡&#xff1a;在进行图像分割时&#xff0c;二分类问题中&#xff0c;背景过大&#xff0c;前景过小&#xff1b;多分类问题中&#xff0c;某一类别的物体体积过小。在很多图像数据的时候都会遇到这个情况&#xff0c;尤其是在医学图像处理的…

【ctf.show】--- md5

ctf.show_web9 1.用 dirsearch 扫目录&#xff1a;python dirsearch.py -u 网址 -e php 发现 robots.txt 2.访问 robots.txt 文件 发现 index.phps 3.访问 index.phps 发现源码 <?php $flag""; $password$_POST[password]; if(strlen…

JSP技术及其应用

目录 一、JSP 指令元素 1. page指令 二、JSP 注释 1. HTML注释&#xff1a; 2. Java注释&#xff1a; 3. JSP注释&#xff1a; 三、页面编码格式 1. pageEncoding&#xff1a; 2. contentType&#xff1a; 一、JSP 指令元素 JSP包含三种主要的指令元素&#xff1a;pag…

开源,微信小程序-超级计算器T3000 简介

笔者于四年前自学微信小程序开发&#xff0c;这个超级计算器T3000就是当时的练习作品。超级计算器T3000的功能有很多&#xff0c;其中的核心技术是矩阵计算&#xff0c;使用的工具库是math.js&#xff0c;其次是复杂运算和分式运算。关于math.js的使用&#xff0c;可以参考另一…

【快速上手ESP32(基于ESP-IDFVSCode)】01-环境配置GPIO口延时函数(先点个灯)

前言 立创开发板之前出了个ESP32S3R8N8的开发板&#xff0c;当时嫖了个优惠券&#xff0c;九块九拿下了。 现在不仅是35.9一个&#xff0c;而且还没货。 如果真的想要的小伙伴可以自己去打板焊一个&#xff0c;人家开源了&#xff08;目测难度较大&#xff0c;反正我是焊不上…