uniapp页面vue3下拉触底发送获取新数据请求实现分页功能

页面下拉触底获取新数据实现分页功能实现方式有两种,根据自己的业务需求来定,不同的方案适用场景不一样,有的是一整个页面下拉获取新数据,有的是部分盒子内容滚动到底部时候实现获取新数据,下面讨论一下两种方式的区别。

整个页面触底

整个页面触底也就是整个页面都可以下滑滚动的,使用view标签配套css实现

<view class="orderList">......
</view>

实现的效果:整个页面都是可以滚动的,注意看顶部也是可以滑动的

使用uniapp的触底获取新数据的功能,可以在page.json里面配置距离底部多少距离触发函数,官方文档:页面 | uni-app官网

代码实现:

import { onReachBottom } from '@dcloudio/uni-app'// 触底后去新数据
onReachBottom(() => {console.log('触底后去新数据')if (orderList.value.length >= pages.total) {uni.showToast({title: '没有更多数据了',icon: 'none',duration: 1000,})} else {pages.current++}
})

 

部分内容触底

官方文档:scroll-view | uni-app官网

可滚动视图区域。用于区域滚动。需注意在webview渲染的页面中,区域滚动的性能不及页面滚动。配置 lower-threshold 实现距离底部多少距离可以触发函数@scrolltolower

实现的效果:红框选中的是固定不动的

 

滚动视图:

<scroll-viewscroll-yclass="orderList":lower-threshold="200"@scrolltolower="scrollBotton">内容
。。。。。</scroll-view>// scroll-view 底部触发
const scrollBotton = () => {console.log('scroll-view底部触发')if (orderList.value.length >= pages.total) {uni.showToast({title: '没有更多数据了',icon: 'none',duration: 1000,})} else {pages.current++}
}// css 
.orderList {padding-bottom: 30rpx;background-color: #e3e3e394;height: calc(100vh - 80rpx - v-bind(contentTop));
}

 

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

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

相关文章

C语言中 一种特殊的 数组或结构体 初始化方法

在C语言中&#xff0c;初始化器&#xff08;Initializer&#xff09;是一种特殊的语法&#xff0c;用于在变量定义时设置初始值。对于不同类型的变量&#xff08;如基本类型、数组、结构体和联合体&#xff09;&#xff0c;初始化器的用法有所不同。 1. 基本类型 对于基本数据…

JSON-RPC跨域通信:Python服务器端解决方案与Js客户端 Mozilla扩展程序

问题背景 构建一个 Mozilla 扩展程序&#xff0c;与远程服务器上的 Python 应用程序进行通信以发送和接收数据。Python 应用程序可以通过 Python 控制台使用 xml-rpc 调用。尝试设计一个 JSON-RPC 来联系同一个应用程序。开发 Python 服务器端&#xff0c;可以通过 python 控制…

CSP十滴水

题目给的容器很多&#xff0c;1e9&#xff0c;我们遍历肯定会超时。 但是他给的信息是&#xff0c;m只有3e5&#xff0c;且每次滴水都会滴在有水的地方&#xff0c;水满了之后也只会扩散到左右有水的地方。也就是说&#xff0c;只有有水的地方才是我们会用到的地方。 所以&am…

【高数】重点内容,公式+推导+例题,大学考试必看

目录 1 隐函数求导1.1 公式1.2 说明1.3 例题 2 无条件极值2.1 运用2.2 求解2.3 例题 3 条件极值3.1 运用3.2 求解3.3 例题 4 二重积分4.1 直角坐标下4.2 极坐标下4.3 例题 5 曲线积分5.1 第一型曲线积分5.2 第二型曲线积分5.3 例题 6 格林公式6.1 公式6.2 说明6.3 例题 &#x…

Postman进阶功能-集合分支管理与编写接口文档

大家好&#xff0c;在接口测试的领域中&#xff0c;我们不断追求更高效、更便捷、更强大的方法与工具。而 Postman 作为一款备受青睐的接口测试工具&#xff0c;其进阶功能更是为我们打开了新的天地。在这其中&#xff0c;集合分支管理与编写接口文档的功能显得尤为重要。 当面…

作业-day-240527

Cday1思维导图 定义自己的命名空间my_sapce&#xff0c;在my_sapce中定义string类型的变量s1&#xff0c;再定义一个函数完成对字符串的逆置 #include <iostream>using namespace std;namespace my_space {string s1"abc123";string recover(string s){int i0…

go-zero 实战(3)

引入 Redis 在之前的 user 微服务中引入 redis。 1. 修改 user/internal/config/config.go package configimport ("github.com/zeromicro/go-zero/core/stores/cache""github.com/zeromicro/go-zero/zrpc" )type Config struct {zrpc.RpcServerConfMys…

拖线无人机技术

拖线无人机技术是一种独特且高效的无人机应用技术&#xff0c;其设计理念源于风筝。这种无人机不仅能够在空中稳定飞行&#xff0c;而且具备极强的抗干扰能力&#xff0c;使其在各种复杂环境下都能保持通信畅通和任务执行的高效。 拖线无人机技术的核心在于其拖线系统。与传统…

Overall Accuracy(OA)、Average Accuracy(AAcc)计算公式

以二分类为例&#xff1a;1.总体精度(Overall Accuracy, OA)&#xff1a;样本中正确分类的总数除以样本总数。 OA(TPTN)/(TPFNFPTN)2.平均精度(Average Accuracy, AA)&#xff1a;每一类别中预测正确的数目除以该类总数&#xff0c;记为该类的精度&#xff0c;最后求每类精度的…

2022全国大学生数学建模竞赛ABC题(论文+代码)

文章目录 &#xff08;1&#xff09;2022A波浪能最大输出功率&#xff08;2&#xff09;2022B无人机定位&#xff08;3&#xff09;2022C古代玻璃制品成分分析&#xff08;4&#xff09;论文和代码链接 &#xff08;1&#xff09;2022A波浪能最大输出功率 &#xff08;2&#x…

检测 CSS 中的 JavaScript 支持

最近&#xff0c;我惊喜地发现了一个CSS媒体特性——scripting&#xff0c;它能够在所有现代浏览器中使用。这意味着&#xff0c;我们可以根据用户浏览器是否支持JavaScript来提供不同的CSS规则&#xff0c;从而减少未样式化内容的闪烁或不受欢迎的布局偏移。 使用方法 使用这…

su模型转3d模型不够平滑怎么办?---模大狮

当将SU模型转换为3D模型时&#xff0c;可能会遇到模型不够平滑的情况&#xff0c;这会影响到最终的渲染效果和视觉体验。本文将探讨在此情况下应该如何解决&#xff0c;帮助读者更好地处理这一常见的问题。 一、检查SU模型细分程度 首先要检查的是原始的SU模型的细分程度。在S…

go语言之map

1.map认识 哈希表是一种巧妙并且实用的数据结构。它是一个无序的key/value对的集合&#xff0c;其中所有的key都是不同的&#xff0c;然后通过给定的key可以在常数时间复杂度内检索、更新或者删除对用的value。 在Go语言中&#xff0c;一个map就是一个哈希表的引用&…

XSKY CTO 在英特尔存储技术峰会的演讲:LLM 存储,架构至关重要

5 月 17 日&#xff0c;英特尔存储技术峰会在北京顺利举办。作为英特尔长期的合作伙伴&#xff0c;星辰天合受邀参加了此次峰会。星辰天合 CTO 王豪迈作为特邀嘉宾之一&#xff0c;作了主题为《LLM 存储&#xff1a;架构至关重要》的演讲&#xff0c;分享了大语言模型&#xff…

2024年中国金融行业网络安全案例集

随着科技的飞速发展,金融行业与信息技术的融合日益加深,网络安全已成为金融行业发展的生命线。金融行业作为国家经济的核心支柱&#xff0c;正在面临着日益复杂严峻的网络安全挑战。因此&#xff0c;深入研究和探讨金融行业的网络安全问题&#xff0c;不仅关乎金融行业的稳健运…

Jtti:如何在Linux服务器上查看系统日志?

在美国的Linux服务器上查看系统日志是系统管理员常见的任务之一。系统日志可以帮助你诊断和解决服务器上的问题。以下是如何在Linux服务器上查看系统日志的详细教程&#xff1a; 1. 连接到服务器 首先&#xff0c;通过SSH连接到你的Linux服务器。如果你在本地终端使用SSH&#…

MIPI竖屏解决方案,普立晶POL8901升级POL8903 两PORT LVDS桥接到MIPI,加旋转

POL8903描述&#xff1a; 系统&#xff1a; •采用高性能MIPS 32位CPU内核&#xff1b; •高性能DSP内核图像处理单元&#xff1b; •16 KB指令Cache&#xff1b;16 KB数据Cache&#xff1b; •96 KB SRAM&#xff1b;内置DDR 3控制器&#xff1b; LVDS输入&#xff1a; …

Python代码:十七、生成列表

1、题目 描述&#xff1a; 一串连续的数据用什么记录最合适&#xff0c;牛牛认为在Python中非列表&#xff08;list&#xff09;莫属了。现输入牛牛朋友们的名字&#xff0c;请使用list函数与split函数将它们封装成列表&#xff0c;再整个输出列表。 输入描述&#xff1a; …

取代或转型?人工智能对软件测试的影响(内附工具推荐)

在当今快速发展的数字环境中&#xff0c;从移动App到基于Web的平台&#xff0c;软件已成为我们日常生活和工作不可或缺的一部分。然而&#xff0c;随着软件系统变得越来越复杂&#xff0c;如何确保其质量和可靠性已成为开发人员和测试人员所面临的一大重要挑战。 这就是软件测…

从0开始学统计

1.什么是统计学&#xff1f;统计学主要研究哪些问题&#xff1f; 统计学是一门科学&#xff0c;主要研究数据的收集、分析、解释和呈现方法。它涉及收集数据的方法&#xff0c;如调查和实验设计&#xff0c;以及通过数学和计算方法来分析和解释数据的过程。统计学的主要目标是…