uniapp pc端和移动端列表上拉刷新加载分页

news2024/12/24 2:17:03

效果图:
在这里插入图片描述
在这里插入图片描述

tips: 实现了pc端和移动端兼容

代码实现:

html:

<view v-if="answerList.length >= 1" style="padding:30rpx 0;color:#888;text-align: center;">
	<view>{{loadMore}}</view>
</view>

data:

data() {
	return {
		pageNo: 1,
		pageSize: 10,
		totalCount: 0,
		loadMore: '上拉加载更多'
	}
}
// uniapp移动端触底生命周期
onReachBottom() {
	this.getList()
},
mounted() {
	// 判断当前是移动端还是pc端
	if (this.isMobile()) {
		console.log('移动端')
	} else {
		console.log('pc端')
		window.addEventListener('scroll', this.scrollBottom)
	}
			
},
methods: {
	isMobile() {
		let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
		return flag
	},
	// pc端触底方法
	scrollBottom() {
		// 变量scrollTop为当前页面的滚动条纵坐标位置
		 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
		// 变量windowHeight 是可视区的高度
		 let windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	    // 变量scrollHeight 是滚动条的总高度
	    let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
			
	    // 到底的条件
	    if (scrollTop + windowHeight >= scrollHeight - 100) {
	      // 到底后要触发的事件
	      console.log('pc端触底了');
	      this.getList()
	  }
	},
	getList() {
		if ((this.pageNo * this.pageSize) < this.totalCount) {
			this.loadMore = '正在加载中……'
			this.pageNo++
			this.keywordsSearch()
		} else {
			this.loadMore = '已无更多'
		}
	},
	// 调用后端接口拿到数据
	keywordsSearch() {
		const params = {
			keywords: this.search.searchValue,
			type: this.search.type,
			pageNo: this.pageNo,
			pageSize: this.pageSize
		}
		searchKeywords(params).then(res => {
			if (res.code == 200) {
				this.answerList = this.answerList.concat(res.result.records)
				this.totalCount = res.result.total
				if (this.pageNo == 1 && this.answerList.length < 10) {
					this.loadMore = '已无更多'
				}
			}
		})
	},
}

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

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

相关文章

一键切换IP地址:电脑IP更改的简便方法

今天我要和大家分享一个电脑IP更改的简便方法——一键切换IP地址。如果您想要更改电脑的IP地址&#xff0c;无需繁琐的设置和复杂的步骤&#xff0c;只需使用以下简单的方法&#xff0c;即可轻松实现IP地址的切换。让我们开始吧&#xff01; 1、使用批处理脚本 批处理脚本是一…

如何在使用JetBrains IDE时文本编辑更高效?这个IdeaVim好用

IdeaVim 插件已经发布一段时间了&#xff0c;它帮助开发者利用 Vim 的强大功能扩展 JetBrains IDE。JetBrains 内部有一个专属团队维护此插件&#xff0c;这为您提供了两项优势&#xff1a;以键盘为中心的编辑器和 IDE 的支持。 获取JetBrains IDE新版下载 Vim为文本中的跳转…

伦敦金的交易时间究竟多长?

接触过伦敦金交易的投资者&#xff0c;应该都知道自己根本不用担心市场上没有交易的机会&#xff0c;因为它全天的交易时间长达20多个小时&#xff0c;也就是在每一个正常的交易日&#xff0c;除去交易平台中途短暂的系统维护时间&#xff0c;投资者几乎全天都可以做盘。 伦敦金…

银河麒麟 ARM 架构 离线安装Docker

1. 下载对应的安装包 进入此地址下载对应的docker 离线安装包 下载地址 将文件上传到服务器 解压此文件 tar zxf docker-18.09.1.tgz将 docker 相关命令拷贝到 /usr/bin&#xff0c;方便直接运行命令 cp docker/* /usr/bin/启动Docker守护程序 dockerd &验证是否安装成…

苹果ipad触控笔哪个好?ipad手写笔推荐

在现在&#xff0c;电容笔已经成为了iPad的一个重要配件&#xff0c;随着其的功能变得更加强大&#xff0c;更多的人开始使用电容笔。因此&#xff0c;如何挑选出一款性价比高、功能优秀的电容笔&#xff0c;是大家最关心的事情。那么&#xff0c;哪一款电容笔更实惠&#xff0…

应对广告虚假流量,app广告变现该如何风控?

移动广告市场中的虚假流量一直是困扰各移动应用厂商的难题&#xff0c;广告作为app商业化变现最为直接快捷的途径&#xff0c;也引申出了流量作弊与反作弊的纷争。 根据《2021中国异常流量报告》&#xff0c;2021年中国品牌广告市场因异常流量造成的损失约为326亿人民币&#…

计算机网络传输层知识总结·

传输层提供的服务 传输层的功能 ●传输层提供进程之间的逻辑通信&#xff0c;即端到端的通信 ●复用和分用 ●差错检测&#xff08;首部和数据部分&#xff09; ●面向连接的TCP和无连接的UDP 端口的作用 ●端口标识的是主机中的进程 ●硬件端口是不同…

早安问候语早安心语,别把人生想太难,人生需要鼓励

1、别把人生想的太难&#xff0c;人生需要几分自我的鼓励&#xff0c;不管在什么时候&#xff0c;要有几分信念和信心&#xff0c;生活少不了哭哭笑笑。青山绿水依然在&#xff0c;来来往往人不同&#xff0c;要学会看得惯&#xff0c;还要学会看得开&#xff0c;你内心的平坦是…

开源酒店预订订房小程序源码系统+多元商户 前端+后端完整搭建教程 可二次开发

大家好啊&#xff0c;罗峰今天来给大家分享一款酒店预订订房小程序源码系统&#xff0c;这款系统进行了全新的升级&#xff0c;从原来的单门店升级成了多门店&#xff0c;可以自由切换账号&#xff0c;统一管理。功能强大。以下是部分代码截图&#xff1a; 酒店预订订房小程序源…

性价比高的学生用台灯?这些Led台灯适合学生用

想要选好护眼台灯首先我们要知道什么是护眼台灯&#xff0c;大的方向来看&#xff0c;护眼台灯就是可以保护视力的台灯&#xff0c;深入些讲就是具备让灯发出接近自然光特性的光线&#xff0c;同时光线不会伤害人眼而出现造成眼部不适甚至是视力降低的照明设备。 从细节上看就…

人物——高会军

近日&#xff0c;美国电气与电子工程师协会&#xff08;英文简称IEEE&#xff09;系统、人与控制论学会在美国夏威夷公布2023年诺伯特维纳奖&#xff08;Norbert Wiener Award&#xff09;获奖者&#xff0c;中国自动化学会会士、副秘书长&#xff0c;欧洲科学院院士&#xff0…

施耐德PLC之间的的无线MODBUS通信实例

本文主要介绍施耐德&#xff08;睿易&#xff09;PLC之间的MODBUS通讯的具体操作和各参数的意义&#xff0c;此方案可以作为施耐德&#xff08;睿易&#xff09;PLC之间的的无线MODBUS 通信实例。在本方案中采用了西门子、施耐德等欧美系PLC专用无线通讯终端DTD434M&#xff0c…

【python】求多变量/样本(矩阵)之间的相关性系数

创作日志&#xff1a; Pearson或Spearson代表的是两个变量之间的相关性&#xff0c;因此一般输入是两个向量(vector)&#xff0c;那么当我们有多个变量时&#xff0c;怎样计算他们两两之间的相关性系数呢&#xff1f;得到的correlation matrix各元素代表的又是什么意思呢&#…

1800*C. Table Decorations(贪心 || 二分)

Problem - 478C - Codeforces 解析&#xff1a; 做法一&#xff1a;二分&#xff0c;显然左右边界为 0 和 总数量除以3。check时mid&#xff0c;任意两项之和都不能小于mid 做法二&#xff1a;贪心&#xff0c;当数量最大的气球数量的一半小于另外两种颜色气球的数量之和&#…

2021年09月 Python(二级)真题解析#中国电子学会#全国青少年软件编程等级考试

Python编程&#xff08;1~6级&#xff09;全部真题・点这里 一、单选题&#xff08;共25题&#xff0c;每题2分&#xff0c;共50分&#xff09; 第1题 有如下Python程序段&#xff1a; x,y12,5 if x % y0:zx/yprint(x,"/",y,"",z) else:zy*xprint(x,&qu…

Allegro模块化布局的操作方法

用Allegro模块化布局的方法,可以大大提高PCB布局的效率。具体操作方法如下: (1)首先,在PCB界面激活MOVE命令,选择菜单Edit→Move 或点击快捷菜单,如下图。 (2)在Find选项卡只选择Symbols(器件) (3)在Optio

东芝Z750的画质真实吗?适合看纪录片吗?

东芝Z750显示的画面更加真实、细腻、有层次感,就感觉电视中的画面像真实世界一般呈现在眼前,东芝电视拥有70余年的原色调校技术,每款产品都有专属的日本调校工程师匠心打造,可以真实还原画面色彩,若是观看类似《航拍中国》这样的旅游记录片时,东芝电视将会营造出万里山河的壮阔…

云LIS系统源码 B/S架构,SaaS模式,可扩展性强

基于B/S架构的医学实验室LIS检验系统源码&#xff0c;整个系统的运行基于WEB层面&#xff0c;只需要在对应的工作台安装一个浏览器软件有外网即可访问。全套系统采用云部署模式&#xff0c;部署一套可支持多家医院检验科共同使用。 采用.Net Core新的技术框架、DEV报表、前端js…

WSL2下的Docker配置和使用

在Windows的Linux子系统&#xff08;Windows Subsystem for Linux&#xff09;WSL2中安装、配置和使用 Docker&#xff0c;可以参考官方教程&#xff1a;WSL上的Docker远程容器入门. 重要步骤总结如下&#xff1a; 先决条件 确保你的计算机运行的是 Windows 10&#xff08;更…

[Python]图片转字符画——这就是我的表情!!!!!!

背景 偶尔看到一些视频&#xff0c;他们把图片转字符画&#xff0c;平常也没有去关注&#xff0c;今天来捣鼓一下。 研究了一下还超级简单的&#xff0c;都是调用别人写好的框架。 网上也有很多教学。 代码实现 from PIL import Image # 表示字符颜色&#xff0c;由深到浅&am…