当前位置: 首页 > news >正文

uniapp项目实践总结(十七)实现滚动触底加载

导语:在日测的开发过程中,经常会碰到页面需要渲染大量数据的情况,这时候就需要用到滚动加载功能,下面总结一下方法。

目录

  • 原理分析
  • 实战演练
  • 案例展示

原理分析

使用@scrolltolower事件来监听滚动到底部,然后加载下一页的数据。

实战演练

模板页面

<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;
}

脚本使用

  • 定义数据
// 滚动列表
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);
}

案例展示

  • h5 端效果
    在这里插入图片描述

  • 小程序端效果
    在这里插入图片描述

  • APP 端效果
    在这里插入图片描述

最后

以上就是实现滚动触底加载的主要内容,有不足之处,请多多指正。

相关文章:

uniapp项目实践总结(十七)实现滚动触底加载

导语&#xff1a;在日测的开发过程中&#xff0c;经常会碰到页面需要渲染大量数据的情况&#xff0c;这时候就需要用到滚动加载功能&#xff0c;下面总结一下方法。 目录 原理分析实战演练案例展示 原理分析 使用scrolltolower事件来监听滚动到底部&#xff0c;然后加载下一…...

SAP入门到放弃系列之QM质量检验流程概述

目录 一、流程概述二、操作步骤概述2.1 主数据维护2.2 业务操作 一、流程概述 质量检验流程-Inspection Process Flow,通常由于预先设定的一些规则条件自动触发或者手工触发&#xff0c;例如库存地之间的调拨、生产完工入库检验、采购入库的检验、客户交货前检验等等。另外还有…...

Ansys Zemax | 光学系统设计中如何使用玻璃替换方法来优化玻璃

在光学系统中选择最优玻璃材料时&#xff0c;Conrady d-D以及模型玻璃等传统的玻璃选择方法提供的帮助有限。本文介绍了如何使用玻璃替换方法进行直接玻璃优化&#xff0c;以及在考虑玻璃的可用性、成本及耐候性等因素时&#xff0c;如何进一步严格挑选玻璃。 简介 玻璃替换方法…...

springboot基础--实现默认登录页面

1、搭建项目 依赖中 多加入thymeleaf依赖 <dependencies><!--thymeleaf的依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><!--we…...

TDesign WXS语法

目录 一、输出函数返回值如何获取&#xff1f; 二、WXS语法 三、WXS案例 一、输出函数返回值如何获取&#xff1f; 写在js的方法中 wxml中{{方法名()}}输出&#xff1a; 发现不显示&#xff1f;&#xff1f; 所以不能使用这种方式&#xff01;&#xff01; 二、WXS语法 1.…...

Iterator设计模式

目录 1、示例 1.1 Aggregate接口 1.2 Iterator接口 1.3 Book类 1.4 BookShelf类 1.6 BookShelfIterator 类 1.7 Main类 2、解释Iterator模式中的角色 2.1 Iterator模式的存在意义 2.2 抽象类和接口 2.3 Aggregate 和 Iterator的对应 2.4 容易弄错"下一个"…...

ROS 入门

目录 简介 ROS诞生背景 ROS的设计目标 ROS与ROS2 安装ROS 1.配置ubuntu的软件和更新 2.设置安装源 3.设置key 4.安装 5.配置环境变量 安装可能出现的问题 安装构建依赖 卸载 ROS架构 1.设计者 2.维护者 3. 立足系统架构: ROS 可以划分为三层 ROS通信机制 话…...

第四章 Linux网络编程

ARP 协议 ARP 协议&#xff08;Address Resolution Protocol&#xff09;通过 IP 地址查找对应的 MAC 地址。 当一个主机需要发送数据给另一个主机时&#xff0c;它首先会检查本地的 ARP 缓存表&#xff08;ARP cache&#xff09;中是否存在目标主机的 MAC 地址。如果存在&…...

无涯教程-JavaScript - OFFSET函数

描述 OFFSET函数返回对范围的引用,该范围是一个单元格或单元格范围中指定的行数和列数。 返回的引用可以是单个单元格或单元格范围。您可以指定要返回的行数和列数。 语法 OFFSET (reference, rows, cols, [height], [width]) 争论 Argument描述Required/OptionalReferenc…...

rust切片

切片类型写为[T]。 切片是序列的一个片段。 它是动态大小类型&#xff0c;所以要使用切片类型&#xff0c;就必须使用它的指针类型。引用是最常用的指针类型。 [T; n]能隐式转换成[T]。 一、定义切片 &#xff08;一&#xff09;不可变切片 &[T]&#xff0c;共享切片&…...

2023/9/18 -- C++/QT

作业 完善登录框 点击登录按钮后&#xff0c;判断账号&#xff08;admin&#xff09;和密码&#xff08;123456&#xff09;是否一致&#xff0c;如果匹配失败&#xff0c;则弹出错误对话框&#xff0c;文本内容“账号密码不匹配&#xff0c;是否重新登录”&#xff0c;给定两…...

vue柱状图+折线图组合

<template><div id"main" style"width: 100%;height: 500px; padding-top: .6rem"></div> </template>data() {return {weekData: ["1周","2周","3周","4周","5周","6周&…...

js中如何实现一个简单的防抖函数?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 防抖函数⭐ 使用示例⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏…...

mysq 主从同步错误之 Error_code 1032 handler error HA_ERR_KEY_NOT_FOUND

错误说明&#xff1a; MySQL主从同步的1032错误&#xff0c;一般是指要更改的数据不存在&#xff0c;SQL_THREAD提取的日志无法应用故报错&#xff0c;造成同步失败 &#xff08;Update、Delete、Insert一条已经delete的数据&#xff09;。 1032的错误本身对数据一致性没什么影…...

蓝桥杯 题库 简单 每日十题 day4

01 津津上初中了。妈妈认为津津应该更加用功学习&#xff0c;所以津津除了上学之外&#xff0c;还要参加妈妈为她报名的各科复习班。另外每周妈妈还会送她去学习朗诵、舞蹈和钢琴。但是津津如果一天上课超过八个小时就会不高兴&#xff0c;而且上得越久就会越不高兴。假设津津…...

l8-d21 域名解析与http服务器实现原理

一、域名解析gethostbyname函数 主机结构在 <netdb.h> 中定义如下&#xff1a; struct hostent { char *h_name; /* 官方域名 */ char **h_aliases; /* 别名*/ int h_addrtype; /* 地址族&#xff08;地址类型&#xff09; */ int h_l…...

网络安全(黑客技术)自学规划

一、什么是网络安全 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 无论网络、Web、移动、桌面、云等哪个领域&#xff0c;都有攻与防两面性…...

阻止用邮件不停注册wordpress账户的方法

您可以使用多种不同的策略来阻止垃圾邮件注册。以下是一些策略供您参考&#xff1a;第1个最好用 1.完全禁用WordPress注册&#xff1a;如果您不需要在您的WordPress网站上公开注册&#xff0c;最好完全禁用注册&#xff0c;而不是试图打击垃圾邮件注册。要完全禁用WordPress上…...

低代码工具大比拼:哪个最适合你?

低代码开发平台正日益流行&#xff0c;成为企业和开发者们的首选。但是&#xff0c;面对市场上众多的低代码工具&#xff0c;你是否感到困惑呢&#xff1f;今天&#xff0c;就和数聚股份一起探讨一下&#xff0c;究竟应该选择哪个低代码工具才能最好地满足你的需求。 首先&…...

用Python实现链式调用

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 我们在使用Django的models查询数据库时&#xff0c;可以看到有这种写法&#xff1a; form app.models import XXX query XXX.objects.all() query query.filter(name123, age456).filter(salary999)在这种写法里面&#xf…...

Git 代码库中找回丢失文件的实用指南

1. 为什么Git能帮你找回丢失的代码&#xff1f; 作为开发者&#xff0c;你一定遇到过这样的场景&#xff1a;不小心执行了rm -rf删错了文件&#xff0c;或者手滑把整个功能模块给覆盖了。这时候千万别慌&#xff0c;Git就像个贴心的时光机&#xff0c;能帮你找回99%的丢失文件。…...

思源宋体终极指南:免费商用中文字体解决方案从入门到精通

思源宋体终极指南&#xff1a;免费商用中文字体解决方案从入门到精通 【免费下载链接】source-han-serif-ttf Source Han Serif TTF 项目地址: https://gitcode.com/gh_mirrors/so/source-han-serif-ttf 还在为商业项目寻找高质量中文字体而烦恼&#xff1f;思源宋体这款…...

零成本实现3D模型跨平台迁移:Blender到Unreal Engine的无缝解决方案

零成本实现3D模型跨平台迁移&#xff1a;Blender到Unreal Engine的无缝解决方案 【免费下载链接】bl_datasmith Blender addon to export UE4 Datasmith format 项目地址: https://gitcode.com/gh_mirrors/bl/bl_datasmith 你是否曾遇到这样的困境&#xff1a;在Blender…...

DanKoe 视频笔记:生活哲学:理解生活的三个阶段

在本节课中&#xff0c;我们将学习一个关于个人成长与生活节奏的框架。通过理解“强度”、“一致性”和“好奇心”这三个循环往复的阶段&#xff0c;你可以更好地定位自己当前的状态&#xff0c;并学会顺应而非对抗生活的自然周期&#xff0c;从而减少迷茫&#xff0c;更有效地…...

破局B站音频提取难题:BilibiliDown革新性解决方案全解析

破局B站音频提取难题&#xff1a;BilibiliDown革新性解决方案全解析 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https://gitcode.com/gh_mirrors…...

计算机毕业设计springboot英语学习网站 基于SpringBoot的在线英语教育平台设计与实现 SpringBoot框架下的智能化英语辅助学习系统开发

计算机毕业设计springboot英语学习网站3i8387gp &#xff08;配套有源码 程序 mysql数据库 论文&#xff09; 本套源码可以在文本联xi,先看具体系统功能演示视频领取&#xff0c;可分享源码参考。全球化时代对英语能力的需求日益增长&#xff0c;信息技术在教育领域的广泛应用推…...

UE5项目GPU瓶颈卡顿?手把手教你用GPU Visualizer揪出渲染性能元凶

UE5项目GPU瓶颈卡顿&#xff1f;手把手教你用GPU Visualizer揪出渲染性能元凶 当你的UE5项目在真机测试时突然掉帧到30fps以下&#xff0c;而编辑器里明明运行流畅——这种"开发环境正常&#xff0c;实机表现崩盘"的困境&#xff0c;相信每个UE开发者都经历过。上周我…...

Vue 3 + hls.js 实战:手把手教你打造一个能‘续命’的安防监控播放器

Vue 3 hls.js 打造安防级视频流播放器的"续命"秘籍 在安防监控、智慧城市等实时视频流应用场景中&#xff0c;网络抖动、服务中断、页面切换等问题常常导致视频播放中断&#xff0c;严重影响监控效果。本文将深入探讨如何基于Vue 3和hls.js构建一个具备"续命&q…...

线上年销 10 亿的背后:实体转型的 “线上 + 线下” 实战逻辑复盘

在行业的讨论声中&#xff0c;总有声音将某些日化品牌的崛起归类为 “资本运作” 或 “流量套路”。但实际上&#xff0c;深耕日化赛道近 20 年的顶俏&#xff0c;凭借 10 亿级的年销售额&#xff0c;为无数身处转型期的实体商家&#xff0c;提供了一份极具含金量的实战答卷。从…...

保姆级教程:用Docker Compose一键部署ZLMediaKit流媒体服务器(含OBS推流配置)

从零搭建私有流媒体平台&#xff1a;Docker Compose ZLMediaKit OBS全流程指南 流媒体技术正在重塑内容传播的方式。无论是企业内部培训、游戏直播还是产品演示&#xff0c;一个稳定高效的私有流媒体平台都能显著提升沟通效率。本文将手把手教你如何用Docker Compose快速部署…...