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项目实践总结(十七)实现滚动触底加载
导语:在日测的开发过程中,经常会碰到页面需要渲染大量数据的情况,这时候就需要用到滚动加载功能,下面总结一下方法。 目录 原理分析实战演练案例展示 原理分析 使用scrolltolower事件来监听滚动到底部,然后加载下一…...
SAP入门到放弃系列之QM质量检验流程概述
目录 一、流程概述二、操作步骤概述2.1 主数据维护2.2 业务操作 一、流程概述 质量检验流程-Inspection Process Flow,通常由于预先设定的一些规则条件自动触发或者手工触发,例如库存地之间的调拨、生产完工入库检验、采购入库的检验、客户交货前检验等等。另外还有…...
Ansys Zemax | 光学系统设计中如何使用玻璃替换方法来优化玻璃
在光学系统中选择最优玻璃材料时,Conrady d-D以及模型玻璃等传统的玻璃选择方法提供的帮助有限。本文介绍了如何使用玻璃替换方法进行直接玻璃优化,以及在考虑玻璃的可用性、成本及耐候性等因素时,如何进一步严格挑选玻璃。 简介 玻璃替换方法…...
springboot基础--实现默认登录页面
1、搭建项目 依赖中 多加入thymeleaf依赖 <dependencies><!--thymeleaf的依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><!--we…...
TDesign WXS语法
目录 一、输出函数返回值如何获取? 二、WXS语法 三、WXS案例 一、输出函数返回值如何获取? 写在js的方法中 wxml中{{方法名()}}输出: 发现不显示?? 所以不能使用这种方式!! 二、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 协议(Address Resolution Protocol)通过 IP 地址查找对应的 MAC 地址。 当一个主机需要发送数据给另一个主机时,它首先会检查本地的 ARP 缓存表(ARP cache)中是否存在目标主机的 MAC 地址。如果存在&…...
无涯教程-JavaScript - OFFSET函数
描述 OFFSET函数返回对范围的引用,该范围是一个单元格或单元格范围中指定的行数和列数。 返回的引用可以是单个单元格或单元格范围。您可以指定要返回的行数和列数。 语法 OFFSET (reference, rows, cols, [height], [width]) 争论 Argument描述Required/OptionalReferenc…...
rust切片
切片类型写为[T]。 切片是序列的一个片段。 它是动态大小类型,所以要使用切片类型,就必须使用它的指针类型。引用是最常用的指针类型。 [T; n]能隐式转换成[T]。 一、定义切片 (一)不可变切片 &[T],共享切片&…...
2023/9/18 -- C++/QT
作业 完善登录框 点击登录按钮后,判断账号(admin)和密码(123456)是否一致,如果匹配失败,则弹出错误对话框,文本内容“账号密码不匹配,是否重新登录”,给定两…...
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中如何实现一个简单的防抖函数?
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 防抖函数⭐ 使用示例⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏…...
mysq 主从同步错误之 Error_code 1032 handler error HA_ERR_KEY_NOT_FOUND
错误说明: MySQL主从同步的1032错误,一般是指要更改的数据不存在,SQL_THREAD提取的日志无法应用故报错,造成同步失败 (Update、Delete、Insert一条已经delete的数据)。 1032的错误本身对数据一致性没什么影…...
蓝桥杯 题库 简单 每日十题 day4
01 津津上初中了。妈妈认为津津应该更加用功学习,所以津津除了上学之外,还要参加妈妈为她报名的各科复习班。另外每周妈妈还会送她去学习朗诵、舞蹈和钢琴。但是津津如果一天上课超过八个小时就会不高兴,而且上得越久就会越不高兴。假设津津…...
l8-d21 域名解析与http服务器实现原理
一、域名解析gethostbyname函数 主机结构在 <netdb.h> 中定义如下: struct hostent { char *h_name; /* 官方域名 */ char **h_aliases; /* 别名*/ int h_addrtype; /* 地址族(地址类型) */ int h_l…...
网络安全(黑客技术)自学规划
一、什么是网络安全 网络安全可以基于攻击和防御视角来分类,我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术,而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 无论网络、Web、移动、桌面、云等哪个领域,都有攻与防两面性…...
阻止用邮件不停注册wordpress账户的方法
您可以使用多种不同的策略来阻止垃圾邮件注册。以下是一些策略供您参考:第1个最好用 1.完全禁用WordPress注册:如果您不需要在您的WordPress网站上公开注册,最好完全禁用注册,而不是试图打击垃圾邮件注册。要完全禁用WordPress上…...
低代码工具大比拼:哪个最适合你?
低代码开发平台正日益流行,成为企业和开发者们的首选。但是,面对市场上众多的低代码工具,你是否感到困惑呢?今天,就和数聚股份一起探讨一下,究竟应该选择哪个低代码工具才能最好地满足你的需求。 首先&…...
用Python实现链式调用
嗨喽,大家好呀~这里是爱看美女的茜茜呐 我们在使用Django的models查询数据库时,可以看到有这种写法: form app.models import XXX query XXX.objects.all() query query.filter(name123, age456).filter(salary999)在这种写法里面…...
ESP8266 KiCAD库零基础上手:高效配置开源硬件设计工具指南
ESP8266 KiCAD库零基础上手:高效配置开源硬件设计工具指南 【免费下载链接】kicad-ESP8266 Schematic symbols and PCB footprints for ESP8266 modules 项目地址: https://gitcode.com/gh_mirrors/ki/kicad-ESP8266 在开源硬件设计领域,KiCAD库&…...
高效解决付费墙难题:Bypass Paywalls Clean实用技术指南
高效解决付费墙难题:Bypass Paywalls Clean实用技术指南 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在数字信息时代,付费墙已成为获取优质内容的主要障碍&…...
嵌入式开发调试与问题诊断实战指南
嵌入式工程师常见问题诊断与调试经验分享1. 典型开发场景分析1.1 开发环境差异问题"在我的开发环境运行正常"是嵌入式工程师最常遇到的困境之一。这种现象通常源于:编译器版本差异(GCC/Keil/IAR版本不一致)硬件平台差异(…...
避坑指南:三自由度机械臂DH参数建模与逆解求解的那些‘坑’(从理论到Matlab/Python验证)
三自由度机械臂运动学建模实战:从DH参数陷阱到逆解验证 机械臂运动学建模是机器人学中最基础却最容易踩坑的领域之一。很多工程师和学生在理论学习阶段看似掌握了DH参数法和正逆运动学推导,但一旦动手实践,总会遇到各种"诡异"的问题…...
Win10下Office16宏编辑器崩溃?3种修复VBE6EXT.OLB加载失败的实战方法
Win10下Office16宏编辑器崩溃?3种修复VBE6EXT.OLB加载失败的实战方法 每次打开VB编辑器就遭遇内存溢出弹窗,这种体验就像被卡在无限循环的代码里——明明只是想在Excel里跑个简单宏,却要面对满屏的"VBE6EXT.OLB加载失败"警告。作为…...
别再一上来就搞ETL了!聊聊我们团队在数据治理项目里踩过的第一个坑:数据资产划分
数据治理第一步:为什么跳过资产划分会让你的ETL工程翻车? 凌晨三点的办公室,咖啡杯已经见底,ETL管道却因为数据源混乱再次报错——这是许多数据团队的真实噩梦。我们团队在去年启动企业级数据治理项目时,也曾陷入"…...
国金证券QMT实盘连接指南:手把手教你配置交易环境与策略回测
国金证券QMT实盘连接实战:从环境搭建到策略部署全解析 引言 在量化交易的世界里,工具的选择往往决定了策略执行的效率与稳定性。国金证券QMT作为国内主流的量化交易平台之一,以其稳定的实盘连接能力和丰富的API接口受到众多量化交易者的青睐。…...
别再为付费教程头疼了!手把手教你用两块ESP32实现经典蓝牙通信(附完整代码)
零成本玩转ESP32蓝牙通信:从踩坑到实战的完整指南 在创客圈里流传着一句话:"每个物联网项目都是从点亮第一颗LED开始的。"而当我们想用两块ESP32开发板通过蓝牙控制这颗LED时,却常常陷入付费教程、失效代码和模糊文档的泥潭。本文将…...
嵌入式系统常用轻量级校验算法解析
单片机中常用的轻量级校验算法 1. 校验算法概述 在嵌入式系统开发中,数据校验是确保通信可靠性和数据完整性的关键技术手段。无论是UART通信中的奇偶校验、CAN总线中的CRC校验,还是Modbus、MAVlink、USB等协议中的校验机制,都体现了校验算法…...
OpenClaw技能开发入门:基于百川2-13B-4bits制作天气查询插件
OpenClaw技能开发入门:基于百川2-13B-4bits制作天气查询插件 1. 为什么选择OpenClaw开发个人技能? 去年冬天,我每天早上都要手动查询天气决定穿衣厚度,直到发现OpenClaw可以通过自然语言指令自动完成这类重复任务。作为一个开源…...
