EP27 触底加载并且避免无效请求

news2024/9/23 7:26:47

文件路径: E:/homework/uniappv3tswallpaper/pages/classlist/classlist.vue

queryParams 中添加了 pageNumpageSize 属性。
onReachBottom 周期中再次发起请求。
在请求函数中修改列表参数,将已经获取的数据和新获取的数据结构并重新拼接成新的数组。
在请求函数中添加判断条件。

<template>
	<view class="classlist">
		<view class="content">
			<navigator url="/pages/preview/preview" class="item" v-for="item in classList" :key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		apiGetCLassList
	} from '@/api/apis.js'
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'

	const queryParams = {
		pageNum: 1,
		pageSize: 12
	}
	const noData = ref(false)

	onLoad(e => {
		console.log(e)
		let {
			id = null,
				name = null
		} = e
		uni.setNavigationBarTitle({
			title: name
		})
		queryParams.classid = id

		getClassList()
	})

	// 触底获取新数据
	onReachBottom(() => {
		if (noData.value) {
			return
		}
		queryParams.pageNum++
		getClassList()
	})
	
	// 定义列表参数
	const classList = ref([])

	const getClassList = async () => {
		let res = await apiGetCLassList(queryParams)
		classList.value = [...classList.value, ...res.data]
		if (queryParams.pageSize > res.data.length) {
			noData.value = true
		}
		console.log(111)
	}
</script>

<style lang="scss">
	.classlist {
		.content {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 5px;
			padding: 5rpx;

			.item {
				height: 440rpx;
				width: 100%;

				image {
					height: 100%;
					width: 100%;
					display: block;
				}
			}
		}
	}
</style>

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

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

相关文章

机器学习课程学习周报十三

机器学习课程学习周报十三 文章目录 机器学习课程学习周报十三摘要Abstract一、机器学习部分1. 文生图模型概述2. Stable Diffusion概述3. ControlNet概述4. 概率论复习&#xff08;二&#xff09; 总结 摘要 本周的学习内容涵盖了文生图模型、Stable Diffusion、ControlNet以…

从零开始讲DDR(5)——读懂Datasheet

对于开发人员来说&#xff0c;需要根据实际场景和使用的需要&#xff0c;使用不同厂家&#xff0c;不同型号的DDR&#xff0c;虽然原理上大同小异&#xff0c;但是还是有一些细节上的需要注意的地方&#xff0c;接触一个新的DDR芯片&#xff0c;首先就是需要找到对应的datashee…

Mybatis 返回 Map 对象

一、场景介绍 假设有如下一张学生表&#xff1a; CREATE TABLE student (id int NOT NULL AUTO_INCREMENT COMMENT 主键,name varchar(100) NOT NULL COMMENT 姓名,gender varchar(10) NOT NULL COMMENT 性别,grade int NOT NULL COMMENT 年级,PRIMARY KEY (id) ) ENGINEInnoD…

LeetCode讲解篇之238. 除自身以外数组的乘积

文章目录 题目描述题解思路题解代码 题目描述 题解思路 对于该题&#xff0c;我们可以先使用一个循环记录所有非零元素的乘积结果和非零元素的个数 如果非零元素个数为0&#xff0c;则非零元素的乘积除以数组对应位置的数字就是除自身以外的数组的乘积如果非零元素个数为1&am…

新质农业——水肥一体化技术

橙蜂智能公司致力于提供先进的人工智能和物联网解决方案&#xff0c;帮助企业优化运营并实现技术潜能。公司主要服务包括AI数字人、AI翻译、埃域知识库、大模型服务等。其核心价值观为创新、客户至上、质量、合作和可持续发展。 橙蜂智农的智慧农业产品涵盖了多方面的功能&…

【人工智能学习】8_人工智能其他通用技术

知识图谱 在看影视剧或小说时&#xff0c;若其中的人物很多、人物关系复杂&#xff0c;我们一般会用画人物关系图谱来辅助理解人物关系。那什么是知识图谱呢&#xff1f; 知识是人类对信息进行处理之后的认识和理解&#xff1b;对数据和信息的凝练、总结后的成果。 将信息转…

MySQL-排名函数ROW_NUMBER(),RANK(),DENSE_RANK()函数的异同

MySQL-排名函数ROW_NUMBER()&#xff0c;RANK()&#xff0c;DENSE_RANK()函数的异同 前言 假设有如下表结构与数据&#xff0c;class_id表示班级&#xff0c;需求&#xff1a;现在要按照班级分组&#xff0c;每个班级的学生进行年龄从小到大排序 一、ROW_NUMBER()函数 ROW_NUM…

YOLO航拍车辆和行人识别

YOLO航拍车辆和行人识别 图片数量9695&#xff0c;标注为xml和txt格式&#xff1b; class&#xff1a;car&#xff0c;pedestrian&#xff0c;truck&#xff0c;bus 用于yolo&#xff0c;Python&#xff0c;目标检测&#xff0c;机器学习&#xff0c;人工智能&#xff0c;深度学…

软件测试分类篇(下)

目录 一、按照测试阶段分类 1. 单元测试 2. 集成测试 3. 系统测试 3.1 冒烟测试 3.2 回归测试 4. 验收测试 二、按照是否手工测试分类 1. 手工测试 2. 自动化测试 3. 手工测试和自动化测试的优缺点 三、按照实施组织分类 1. α测试(Alpha Testing) 2. β测试(Beta…

图像放大效果示例【JavaScript】

实现效果&#xff1a; 当鼠标悬停在小图&#xff08;缩略图&#xff09;上时&#xff0c;大图&#xff08;预览图&#xff09;会随之更新为相应的小图&#xff0c;并高亮当前悬浮的小图的父元素。 代码&#xff1a; 1. HTML部分 <!DOCTYPE html> <html lang"z…

Nginx简介;Nginx安装

一&#xff0c;Nginx简介 Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件&#xff08;IMAP/POP3&#xff09;代理服务器&#xff0c;在BSD-like 协议下发行。是一个高性能的HTTP和反向代理web服务器 &#xff0c;同时也提供了IMAP/POP3/SMTP服务。 其特点是占有内存少…

OpenCV特征检测(8)检测图像中圆形的函数HoughCircles()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在灰度图像中使用霍夫变换查找圆形。 该函数使用霍夫变换的一种修改版本在灰度图像中查找圆形。 例子&#xff1a; #include <opencv2/imgp…

【解密 Kotlin 扩展函数】扩展函数的创建(十六)

导读大纲 1.1 为第三方的类添加方法: 扩展函数 1.1 为第三方的类添加方法: 扩展函数 Kotlin 的主题之一是与现有代码的平滑集成 即使是纯 Kotlin 项目,也是构建在 Java 库之上的 如 JDK、Android 框架和其他第三方框架 而当你将 Kotlin 集成到 Java 项目中时 你还要处理尚未或不…

Ubuntu清理内存导致的一系列错误及解决方法

文章目录 火狐浏览器和pycharm消失打不开 安不上 卸不掉后记 火狐浏览器和pycharm消失 打不开 安不上 卸不掉 清理内存后&#xff0c;火狐和pycharm的图标都消失了&#xff0c;在终端输入Firefox显示无法打开 应当先snap install firefox&#xff0c;然而snap install firefo…

【排序算法】插入排序_直接插入排序、希尔排序

文章目录 直接插入排序直接插入排序的基本思想直接插入排序的过程插入排序算法的C代码举例分析插入排序的复杂度分析插入排序的优点 希尔排序希尔排序&#xff08;Shell Sort&#xff09;详解希尔排序的步骤&#xff1a;希尔排序的过程示例&#xff1a;希尔排序的C语言实现举例…

啥?Bing搜索古早BUG至今未改?

首先&#xff0c;大家先看下面的一个数学公式。 Γ ( z ) ∫ 0 ∞ t z − 1 e − t d t . \Gamma(z) \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)∫0∞​tz−1e−tdt. 看不懂&#xff1f;没关系&#xff0c;因为我也看不懂 这不是谈论的重点。 当你把鼠标光标移到公式的最开头&…

netflix是什么样的企业文化

netflix是什么样的企业文化 Netflix的企业文化以其“自由与责任”而闻名&#xff0c;这种文化理念在业界被广泛誉为管理的“黄金法则”。《奈飞文化手册》自2009年面世以来&#xff0c;便迅速成为全球企业管理的典范&#xff0c;吸引了超过1500万次的在线阅读与下载。Netflix的…

【C++篇】引领C++模板初体验:泛型编程的力量与妙用

文章目录 C模板编程前言第一章: 初始模板与函数模版1.1 什么是泛型编程&#xff1f;1.1.1 为什么要有泛型编程&#xff1f;1.1.1 泛型编程的优势 1.2 函数模板的基础1.2.1 什么是函数模板&#xff1f;1.2.2 函数模板的定义格式1.2.3 示例&#xff1a;通用的交换函数输出示例&am…

【网络】高级IO——Reactor版TCP服务器

目录 1.什么是Reactor 1.1.餐厅里的Reactor模式 2.Reactor的由来 2.1.单 Reactor 单进程 / 线程 2.2.单 Reactor 多线程 / 多进程 2.3.多 Reactor 多进程 / 线程 3.实现单 Reactor 单进程版本的TCP服务器 3.1.Connection类 3.2.TcpServer类 3.3.Connection的真正用处 …

深蓝学院-- 量产自动驾驶中的规划控制算法 小鹏

文章目录 0. 前言1.发展现状2.行车功能中难点问题及解决思路问题1&#xff1a;车道居中辅助&#xff0c;画龙&#xff0c;蛇行问题。问题2&#xff1a;外界环境扰动以及传感器信息缺失下的横向控制难点问题3&#xff1a;大坡度平稳停车 3. 泊车功能中难点问题及解决思路问题1&a…