uniapp上拉刷新下拉加载

news2024/11/25 16:22:01

 方法一:

z-paging 的组件库:

show-loading-more-no-more-view="false"
  • 该属性控制是否显示 "加载更多" 或 "没有更多" 的提示。如果设为 false,则不会显示这些提示。如果设为 true,当数据加载完毕后会显示 "没有更多" 的提示。
  • 默认情况下,分页组件会显示这两个状态,你可以根据需求设置为 false
fixed="true"
  • 该属性用于设置分页组件是否固定在页面的底部。如果设为 true,分页组件会固定在页面底部,不会随着页面滚动而移动。
@onRefresh="onRefresh"
  • 这是 z-paging 提供的事件,表示触发了刷新操作。当用户下拉刷新时,会触发 onRefresh 方法。
  • 在 onRefresh 方法中,你通常需要重置数据并重新加载数据列表。

安装:npm install z-paging

 

<template>
	<view class="home-page">
		<z-paging ref="paging" v-model="dataList" :show-loading-more-no-more-view="false" :fixed="true"
			@onRefresh="onRefresh" bg-color="#ffffff" @query="queryList">
			<view class="top-box" slot="top">
				<custom :mode="1" title=" " background="transparent" :hiddenBtn="true"></custom>
			</view>
			<view class="list-box">
				<!-- 上拉刷新下拉加载的数据 -->
				<list-item v-for="(item, index) in dataList" :key="index" :info="item"></list-item>
			</view>
			<qq-footer slot="empty" :show="true" :emptyText="'暂无数据'"></qq-footer>
		</z-paging>
	</view>
</template>
<script>
	export default {
		name: 'homepage',
		data() {
			return {
				dataList: [],
			};
		},
		onShow() {
			this.$store.dispatch('refresh')
		},
		methods: {
			onRefresh() {
				// 告知z-paging下拉刷新结束,这样才可以开始下一次的下拉刷新
				setTimeout(() => {
					// 1.5秒之后停止刷新动画
					// this.$refs.paging.complete();
					// this.$refs.paging.reload()
				}, 1500)
			},
			queryList(pageNumber, pageSize) {
				this.request({
					url: '/url/url',
					method: 'get',
					data: {
						pageNumber,
						pageSize
					}
				}).then(res => {
					if (res.status === 200) {
						this.$refs.paging.complete(res.data);
					}
				}).catch(err => {
					this.$refs.paging.complete(false);
				})
			},
		}
	}
</script>

  方法二:

<template>
	<view>
		<indexNoteList :is_null="is_null" :addEventHandel="false" @refreshNoteList="refreshNoteList" showIsOpen
			:list="noteList">
		</indexNoteList>
	</view>
</template>
<script>
	import NOTE from "@/utils/note.js";
	export default {
		data() {
			return {
				is_null: false,// 是否没有更多数据
				noteList: [],
				page: 1,
				pageSize: 10,
			}
		},
		onLoad() {
			this.getNoteListnew(this.page); //动态列表
		},
		//上拉触底
		onReachBottom() {
			this.getNoteListnew(this.page);
		},
		//监听用户下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 200);
			this.init();
		},
		methods: {
			init() {
				this.setData({
					page: 1,// 重置为第一页
					noteList: [],// 清空列表
					is_null: false,// 重置没有更多数据的状态
				})
				this.getNoteListnew();// 重新加载数据
			},
			getNoteListnew(page = 1) {
				if (this.is_null) return // 如果没有更多数据,就停止请求
				if (page !== 1 && this.is_null == true) return;// 如果不是第一页且没有更多数据,则停止请求
				let formData = {
					pageNumber: page,
					pageSize: this.pageSize,
				}
				this.request({
					url: '/url/url',
					data: formData,
					method: 'get'
				}).then(res => {
					if (!this.rsuccess(res)) return;
					let arr = NOTE.filter(res.data, page == 1 ? [] : this.noteList); // 过滤数据
					arr = NOTE.handelList(arr);// 处理数据
					 // 如果是第一页,直接替换数据;否则,追加数据
					if (page == 1) {
						this.noteList = arr;
					} else {
						this.noteList = this.noteList.concat(arr);
					}
					// 判断是否还有更多数据
					if (arr.length < this.pageSize) {
						this.is_null = true;
					} else {
						this.is_null = false;
					}
					this.page = page + 1; // 更新当前页码
				});
			},
		}
	}
</script>

@/utils/note.js

	//处理图片,时间等
	export function handelList(arr = []) {
		arr.forEach(v => {
			v = handelNote(v);
		})
		return arr;
	}
	
	//查重
	export function filter(arr = [], oldArr = []) {
		let ids = oldArr.map(v => v.id);
		return arr.filter(v => !ids.includes(v.id));
	}
	
	//处理单条数据
	export function handelNote(info) {
		//处理图片
		if (String(info.noteImg).trim()) {
			info.noteImg = String(info.noteImg).trim().split(',').filter(v => v);
		} else {
			info.noteImg = [];
		}
		if (String(info.tranNoteImgUrl).trim()) {
			info.tranNoteImgUrl = String(info.tranNoteImgUrl).trim().split(',').filter(v => v);
		} else {
			info.tranNoteImgUrl = [];
		}
		//处理时间
	
		if (!info.createTime) {
			info.time = '未知';
		} else {
	
			info.time = getTimeStr(info.createTime);
		}
	
	
	
		return info;
	}
	
	//处理时间
	export function getTimeStr(t) {
		let NewTime = new Date().getTime();
	
		if (NewTime - t < 1000 * 60 * 2) {
			return '刚刚';
		}
	
		if (NewTime - t < 1000 * 60 * 6) {
			return `${parseInt((NewTime-t)/60000)}分钟前`;
		}
	
		return dateFormat('mm-dd HH:MM', new Date(t));
	}
	
	//更新dom数组
	export function refreshNoteList(E, page) {
		if (E.type == 'update') {
			page.noteList.some((v, i) => {
				if (v.id == E.info.id) {
					page.$set(page.noteList, i, JSON.parse(JSON.stringify(E.info)));
					return true;
				}
				return false;
			});
			return;
		}
		if (E.type == 'delete') {
			page.noteList.some((v, i) => {
				if (v.id == E.info.id) {
					page.noteList.splice(i, 1);
					return true;
				}
				return false;
			});
		}
		if (E.type == 'add') {
			page.noteList.unshift(E.info);
		}
	}
	
	export function dateFormat(fmt, date) {
		let ret;
		let opt = {
			"Y+": date.getFullYear().toString(), // 年
			"m+": (date.getMonth() + 1).toString(), // 月
			"d+": date.getDate().toString(), // 日
			"H+": date.getHours().toString(), // 时
			"M+": date.getMinutes().toString(), // 分
			"S+": date.getSeconds().toString() // 秒
			// 有其他格式化字符需求可以继续添加,必须转化成字符串
		};
		for (let k in opt) {
			ret = new RegExp("(" + k + ")").exec(fmt);
			if (ret) {
				fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length,
					"0")))
			};
		};
		return fmt;
	}
	export function getFormatText(v, unit = '万') {
		if (!v) v = 0;
		v = Number(v);
		if (v < 10000) {
			return v;
		}
		return `${Number(Number(v / 10000).toFixed(1))}${unit}`;
	
	}
	

	
	export default {
		handelList,
		filter,
		handelNote,
		refreshNoteList,
	}

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

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

相关文章

CSS教程(二)- CSS选择器

1. 作用 匹配文档中的某些元素为其应用样式。根据不同需求把不同的标签选出来。 2. 分类 分类 基础选择器 包含 标签选择器、ID选择器、类选择器、通用选择器等 复合选择器 包含 后代选择器、子代选择器、伪类选择器等 1 标签选择器 介绍 又称为元素选择器&#xff0c;根…

LeetCode 56.合并区间

思路&#xff1a; 类似于用最少的箭射气球题目&#xff0c;最主要是要处理区间之间是否有重叠&#xff0c;如果无重叠则加入数组&#xff0c;如果有重叠&#xff0c;则需要重新设判断的边界&#xff0c;与下一个区间继续判断。 难点在于 代码用法 需熟练掌握 思想简单&#…

【MySQL】MySQL基础知识复习(上)

前言 本篇博客将复习MySQL的基础知识&#xff0c;及着重复习CRUD&#xff08;增删查改&#xff09;操作。 目录 一.MySQL数据库基础知识 1.数据库操作 1.1显示当前的数据库 1.2 创建数据库 1.3 使用数据库 1.4 删除数据库 2.数据类型 2.1.数字类型 2.2字符串类型 2.3…

华为大变革?仓颉编程语言会代替ArkTS吗?

在华为鸿蒙生态系统中&#xff0c;编程语言的选择一直是开发者关注的焦点。近期&#xff0c;华为推出了自研的通用编程语言——仓颉编程语言&#xff0c;这引发了关于仓颉是否会取代ArkTS的讨论。本文将从多个角度分析这两种语言的特点、应用场景及未来趋势&#xff0c;探讨仓颉…

稀硫酸介质中 V 型球阀的材质选择与选型要点-耀圣

稀硫酸介质中 V 型球阀的材质选择与选型要点 在工业生产中&#xff0c;稀硫酸是一种常见的化学介质&#xff0c;对于输送和控制稀硫酸的阀门&#xff0c;正确的材质选择和选型至关重要。本文将介绍稀硫酸介质中 V 型球阀的材质选择&#xff0c;并提供一些选型的要点。 一、稀硫…

昇思大模型平台打卡体验活动:项目3基于MindSpore的GPT2文本摘要

昇思大模型平台打卡体验活动&#xff1a;项目3基于MindSpore的GPT2文本摘要 1. 环境设置 本项目可以沿用前两个项目的相关环境设置。首先&#xff0c;登陆昇思大模型平台&#xff0c;并进入对应的开发环境&#xff1a; https://xihe.mindspore.cn/my/clouddev 接着&#xff0…

定时器输入捕获实验配置

首先&#xff0c;第一个时基工作参数配置 HAL_TIM_IC_Init( ) 还是一样的套路&#xff0c;传参是一个句柄&#xff0c;先定义一个结构体 Instance&#xff1a;指向TIM_TypeDef的指针&#xff0c;表示定时器的实例。TIM_TypeDef是一个包含了定时器寄存器的结构体&#xff0c;用…

计算机视觉读书系列(1)——基本知识与深度学习基础

研三即将毕业&#xff0c;后续的工作可能会偏AI方向的计算机视觉方面&#xff0c;因此准备了两条线来巩固计算机视觉基础。 一个是本系列&#xff0c;阅读经典《Deep Learning for Vision System》&#xff0c;做一些总结跑一些例子&#xff0c;也对应本系列文章 二是OpenCV实…

运维智能化转型:AIOps引领IT运维新浪潮

1. AIOps是什么&#xff1f; AIOps&#xff08;Artificial Intelligence for IT Operations&#xff09;&#xff0c;即人工智能在IT运维中的应用&#xff0c;通过机器学习技术处理运维数据&#xff08;如日志、监控信息和应用数据&#xff09;&#xff0c;解决传统自动化运维…

SkyNet嵌入式系统目标检测实践测试分析

目标检测和跟踪对于资源受限的嵌入式系统来说是具有挑战性的任务。尽管这些任务是人工智能领域中计算量最大的任务之一&#xff0c;但它们在嵌入式设备上只能使用有限的计算和内存资源。与此同时&#xff0c;这种资源受限的实现通常需要满足额外的苛刻要求&#xff0c;如实时响…

「OC」SDWebimage的学习

「OC」SDWebimage的学习 前言 在知乎日报这个项目之中&#xff0c;我在很多情况下都会进行图片资源的网络申请。通过上网搜索我了解到了SDWebimage这个功能丰富的第三方库&#xff0c;进行了较为浅层的学习。因为SDWebimage这个库之中的相关内容还是较为多且复杂的&#xff0…

SIwave:释放 SIwizard 求解器的强大功能

SIwave 是一种电源完整性和信号完整性工具。SIwizard 是 SIwave 中 SI 分析的主要工具&#xff0c;也是本博客的主题。 SIwizard 用于研究 RF、clock 和 control traces 的信号完整性。该工具允许用户进行瞬态分析、眼图分析和 BER 计算。用户可以将 IBIS 和 IBIS-AMI 模型添加…

Kafka 可观测性最佳实践

Kafka 概述 Kafka 是由 LinkedIn 开发一个分布式的基于发布订阅模式的消息队列&#xff0c;是一个实时数据处理系统&#xff0c;可以横向扩展。与 RabbitMQ、RockerMQ 等中间件一样拥有几大特点&#xff1a; 异步处理服务解耦流量削峰 监控 Kafka 是非常重要的&#xff0c;因…

342--358作业整理(错误 + 重点)

目录 1. 在需要运行的类中 定义 main 方法 2. this 。访问逻辑&#xff1a;先访问本类中&#xff0c;再访问父类中可以访问的成员&#xff08;不包括和本类中重名的成员&#xff09; 3. super 。访问逻辑&#xff1a;super&#xff08;父类对象&#xff09;直接访问父类及以…

Android自启动管控

1. 自启动管控需求来源 自启动、关联启动、交叉启动、推送启动等现象的泛滥除了对个人信息保护带来隐患外&#xff0c;还会导致占用过多的系统CPU和内存资源&#xff0c;造成系统卡顿、发热、电池消耗过快&#xff1b;还可能引入一些包含“恶意代码”的进程在后台隐蔽启动&…

智能的编织:C++中auto的编织艺术

在C的世界里&#xff0c;auto这个关键字就像是一个聪明的助手&#xff0c;它能够自动帮你识别变量的类型&#xff0c;让你的代码更加简洁和清晰。下面&#xff0c;我们就来聊聊auto这个关键字的前世今生&#xff0c;以及它在C11标准中的新用法。 auto的前世 在C11之前&#x…

函数式编程Stream流(通俗易懂!!!)

重点&#xff1a;只关注传入的参数列表和方法体&#xff08;数据操作&#xff09; 1.Lambda表达式 本质是匿名内部类的优化&#xff0c;先写匿名内部类 1.1 基本用法 public class lambdaTest {public static void main(String[] args) { // int i calculateNum((…

C#里对数组的排序操作

一般情况下是采用 Array.Sort(a) 来进行排序。 例子代码如下: /** C# Program to Sort a String using Predefined Function*/ using System; class linSearch {public static void Main(){Console.WriteLine("Enter Number of Elements you Want to Hold in the Arra…

算法每日双题精讲——双指针(移动零,复写零)

&#x1f31f;快来参与讨论&#x1f4ac;&#xff0c;点赞&#x1f44d;、收藏⭐、分享&#x1f4e4;&#xff0c;共创活力社区。 &#x1f31f; 别再犹豫了&#xff01;快来订阅我们的算法每日双题精讲专栏&#xff0c;一起踏上算法学习的精彩之旅吧&#xff01;&#x1f4aa;…