uniapp 触底加载

news2024/11/29 8:51:26

方式一

onReachBottomDistance
缺点:需要整个页面滑动,局部滑动触发不了

{
// pages.json
// 路由下增加 onReachBottomDistance
"path": "detailed/detailed",
  "style": {
    "navigationBarTitleText": "收益明细",
    "onReachBottomDistance": 50 //距离底部多远时触发 单位px
  }
},
// detailed.js
// 触底 与 onLoad,onShow同级
onLoad(options) {},
onShow() {},
onReachBottom() {
  if (this.page < this.totalPages) {
    this.page++
  } else {
    return uni.showToast({
      title: '没有更多数据',
      icon: 'none',
      duration: 2000
    });
  }
  
  uni.showLoading({
  	title: '加载中'
  });
  
  // 请求
  this.getList()
}

在这里插入图片描述

方式二

scroll-view
文档:https://uniapp.dcloud.net.cn/component/scroll-view.html
使用竖向滚动时,需要给一个固定高度,通过 css 设置 height;
使用横向滚动时,需要添加white-space: nowrap;样式。
缺点:隐藏不了滚动条

// 给固定高度
.roll-list {
  width: 100%;
  height: 100%;
  // 隐藏不了滚动条
  &::-webkit-scrollbar {
    display:none
  }
}
<scroll-view
  class="roll-list"
  @scrolltolower="scrolltolower" // 触底事件
  scroll-y="true" // 竖向滚动
  show-scrollbar="false" // 隐藏滚动条
  >
	<view>示例</view>
	<view>示例</view>
	<view>示例</view>
</scroll-view>
data() {
	return{
		this.page: 1,
    	this.totalPages: ''
    	this.list: []
	}
}methods: {
	getList() {
	 api.list({page: this.pages.page,}).then(res => {
	    this.page = res.page
	    this.totalPages = res.totalPages
	    // es6 合并数组
	    this.list = [...this.list,...res.items]
	    uni.hideLoading(); // 关闭加载动画
	  })
	},
	scrolltolower() {
	  if (this.page < this.totalPages) {
	    this.page++
	  } else {
	    return uni.showToast({
	      title: '没有更多数据',
	      icon: 'none',
	      duration: 2000
	    });
	  }
	  
	  uni.showLoading({
	  	title: '加载中'
	  });
	  
	  // 请求
	  this.getList()
	}

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

cpu温度监测 Turbo Boost Switcher Pro for mac最新

Turbo Boost Switcher Pro是一款Mac电脑上的应用程序&#xff0c;旨在帮助用户控制和管理CPU的Turbo Boost功能。Turbo Boost是Intel处理器中的一项技术&#xff0c;可以在需要更高性能时自动提高处理器的频率。然而&#xff0c;这可能会导致电池消耗更快和温度升高。 以下是T…

《计算机视觉中的多视图几何》笔记(2)

Projective Geometry and Transformations of 2D 本章主要介绍本书必要的几何知识与符号。 文章目录 Projective Geometry and Transformations of 2D2.1 Planar geometry2.2 The 2D projective plane2.2.1 Points and lines 2.2.2 Ideal points and the line at infinity2.2…

elementui 中 DateTimePicker 组件时间自定义格式化

elementui 中 DateTimePicker 组件时间自定义格式化 需求分析 需求 elementui 中 DateTimePicker 组件时间自定义格式化 自定义需求&#xff1a;需要获取到 DateTimePicker 组件时间的值为[“2023/9/5 20:2”,“2023/9/4 2:10”] 分析 源码如下&#xff1a; <el-date-pick…

TypeScript类型兼容:协变和逆变

&#x1f3ac; 岸边的风&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 引言 协变&#xff08;Covariance&#xff09; 协变&#xff1a;类型的向下兼容性 逆变&#xff08;Contravaria…

deepspeed训练报错torch.distributed.elastic.multiprocessing.errors.ChildFailedError

测试场景&#xff1a;使用deepspeed框架训练gpt模型 问题&#xff1a; 报错torch.distributed.elastic.multiprocessing.errors.ChildFailedError 具体见截图&#xff1a;

随手笔记(四十五)——idea git冲突

图片为引用&#xff0c;在一次导入项目至gitee的过程中&#xff0c;不知道为什么报了403&#xff0c;很奇怪的一个错误&#xff0c;网上很多的答案大概分成两种。 第一种是最多的&#xff0c;直接找到windows凭据删掉 很抱歉的告诉各位&#xff0c;你们很多人到这里就已经解…

线性代数的本质(四)——行列式

文章目录 行列式二阶行列式 n n n 阶行列式行列式的性质克拉默法则行列式的几何理解 行列式 二阶行列式 行列式引自对线性方程组的求解。考虑两个方程的二元线性方程组 { a 11 x 1 a 12 x 2 b 1 a 21 x 1 a 22 x 2 b 2 \begin{cases} a_{11}x_1a_{12}x_2b_1 \\ a_{21}x_…

Vue3:proxy数据取值proxy[Target]取值

vue3底层是使用proxy进行代理的&#xff0c;而proxy中[[Target]]才是想要的值。 获取target值的方式一&#xff1a; <script setup>//先引入toRawimport { toRaw } from vue;//再使用console.log(toRaw(数据名))</script> 获取target值的方式二&#xff1a; <…

阿里云服务器配置怎么选择?几核几G?带宽系统盘怎么选?

阿里云服务器配置选择_CPU内存/带宽/存储配置_小白指南&#xff0c;阿里云服务器配置选择方法包括云服务器类型、CPU内存、操作系统、公网带宽、系统盘存储、网络带宽选择、安全配置、监控等&#xff0c;阿小云分享阿里云服务器配置选择方法&#xff0c;选择适合自己的云服务器…

NetSuite知识会汇编-管理员篇顾问篇2023

本月初&#xff0c;开学之际&#xff0c;我们发布了《NetSuite知识会汇编-用户篇 2023》&#xff0c;这次发布《NetSuite知识会汇编-管理员篇&顾问篇2023》。本篇挑选了近两年NetSuite知识会中的一些文章&#xff0c;涉及开发、权限、系统管理等较深的内容&#xff0c;共19…

嵌入式Linux驱动开发(I2C专题)(二)

I2C系统的重要结构体 参考资料&#xff1a; Linux驱动程序: drivers/i2c/i2c-dev.cI2CTools: https://mirrors.edge.kernel.org/pub/software/utils/i2c-tools/ 1. I2C硬件框架 2. I2C传输协议 3. Linux软件框架 4. 重要结构体 使用一句话概括I2C传输&#xff1a;APP通过I2…

linux rz乱码文件删除

通过rz上传文件的时候经常会遇到 文件乱码问题&#xff0c;删又删不掉。 使用rz -be的方法上传 遇到乱码文件操作步骤 1. ls -i # 列出文件的编号 2. find . -inum 29229139 -delete # 根据编号删除文件 find 需要扫描的路径 -inum 文件编号 -delete

VRTK4⭐四.和 UI 元素交互

文章目录 &#x1f7e5; 安装Tilia Unity.UI&#x1f7e7; 配置射线与UI交互器1️⃣ 配置直线射线2️⃣ 配置UI交互器 &#x1f7e8; 配置UI1️⃣ 更新EventSystem2️⃣ 进行Canvas设置 我们要实现的功能: 右手触摸到圆盘:显示直线射线 右手圆盘键按下:与选中UI交互 &#x1f7…

JWT安全

文章目录 理论知识cookie(放在浏览器)session(放在 服务器)tokenjwt&#xff08;json web token&#xff09;headerpayloadSignatureJWT通信流程 JWT与Token 区别相同点区别 WebGoat靶场--JWT tokens环境启动第四关第五关第七关 属于越权漏洞 理论知识 cookie(放在浏览器) ​…

静电消除器在工业设备中的用途

静电消除有几种&#xff0c;其中包括离子风枪、离子风嘴、离子风棒、离子风枪、离子风蛇等。今天我们就来聊一下离子风蛇。 离子风蛇是一种坐立式静电消除器&#xff0c;可消除难以接近或接触物体的静电或灰尘&#xff0c;可将蛇管随意变形使风咀指向目标方位&#xff0c;无需…

AIGC:【LLM(八)】——Baichuan2技术报告

文章目录 摘要1. 引言2. 预训练2.1 预训练数据&#xff08;Pre-training Data&#xff09;2.2 架构&#xff08;Architecture&#xff09;2.3 令牌化器&#xff08;Tokenizer&#xff09;2.3.1 Positional Embeddings 2.4 激活和规范化&#xff08;Activations and Normalizati…

vue2-x6-dag自定义vue组件节点

效果如图 官方案例 人工智能建模 DAG 图 vue2中自定义节点 代码 1.dag.json [{"id": "1","shape": "dag-node","x": 290,"y": 110,"data": {"label": "读数据","status&q…

2023CVPR:图像恢复的又一力作

今天要分享的论文是2023CVPR《Efficient and Explicit Modelling of Image Hierarchies for Image Restoration》&#xff0c;图像恢复领域的又一力作&#xff0c;提供了新的发现&#xff0c;给出了新的解决方案 代码 https://github.com/ofsoundof/GRL-Image-Restoration 问…

C语言指针快速入门

指针的基本介绍 简单的说指针用于表示地址&#xff0c;存放的是一个地址 获取指针的地址 //指针的入门 #include <stdio.h>int main() {int num 1;//num的地址是多少//说明1&#xff1a;如果要输出一个变量的地址使用的格式是%p//说明2&#xff1a;&num 表示取出n…

百度SEO优化攻略(提高网站排名的必修课)

百度SEO优化策略介绍&#xff1a; 在百度搜索引擎中&#xff0c;网站的排名越靠前&#xff0c;就越能吸引更多的流量和用户。要想让网站排名更高&#xff0c;就必须进行SEO优化。百度SEO优化是一个长期的过程&#xff0c;需要不断调整和优化。下面介绍5个优化方法&#xff0c;…