uniapp业务实现

news2024/11/23 12:32:59

uni.requset添加异常判断提示,以及加载动画


	/**
	 * 该函数用于发送网络请求获取数据
	 * 请求失败时会弹出相应的错误提示
	 * 请求成功时会检查返回的数据是否存在错误,并根据错误代码做出相应处理
	 * 如果数据请求成功且无错误,则将返回的数据赋值给pets变量
	 */
	function notwork() {
		//显示页面加载动画
		// uni.showLoading();
		//显示标题加载动画
		uni.showNavigationBarLoading()
		// 发起网络请求,使用uni.request方法请求数据
		uni.request({
			// 请求的URL地址
			url: 'https://tea.qingnian8.com/tools/taoShow',
			// 请求的参数,指定每次请求返回数据的大小
			data: {
				size: 10
			},
			// 请求头,添加访问密钥以认证请求身份
			header: {
				'access-key': "581428"
			}
		}).then((res) => {

			// 检查请求返回的数据是否包含错误
			if (res.data.errCode === 0) {
				// 如果没有错误,则将返回的数据赋值给pets变量
				pets.value = res.data
			} else if (res.data.errCode === 400) {
				// 如果返回的错误代码为400,则弹出错误信息提示
				uni.showToast({
					title: res.data.errMsg,
					icon: 'none',
					duration: 1500
				})
			}
		}).catch((err) => {

			// 如果请求失败,则弹出错误提示,提示用户刷新页面
			uni.showToast({
				title: '请求有误,请重新刷新',
				icon: 'none',
				duration: 1500
			})
		}).finally(() => {
			// 取消页面加载动画
			// uni.hideLoading();
			//取消标题加载动画
			uni.hideNavigationBarLoading()
			// 请求失败后的最终操作,此处打印一条日志信息
			console.log('校验结束');
		})
	}

实现触底加载


//页面触底事件
onReachBottom(() => {
	notwork()
})

使用解构的方式,为数组底部添加数据,实现触底刷新

// 检查请求返回的数据是否包含错误
		if (res.data.errCode === 0) {
			// 如果没有错误,则将返回的数据赋值给pets变量
			pets.value = [...pets.value, ...res.data.data]
		} else if (res.data.errCode === 400) {
			// 如果返回的错误代码为400,则弹出错误信息提示
			uni.showToast({
				title: res.data.errMsg,
				icon: 'none',
				duration: 1500
			})
		}

底部触底安全区和触底加载动画组件

.loadMore {
				padding-bottom: calc(env(safe-area-inset-bottom) + 80rpx)
			}

加载组件

分段组件




<uni-segmented-control :current="current" :values="[11,22,33]" @clickItem="onClickItem" styleType="button"
				activeColor="#4cd964"></uni-segmented-control>

属性分析

:current
  • 作用:当前选中的索引。
  • 类型:Number。
  • 默认值:0。
  • 说明:表示当前选中的标签索引。
:values
  • 作用:所有的选项数组,每个元素代表一个可选的标签名称。
  • 类型:Array。
@clickItem
  • 作用:当选中的项发生变化时触发的事件。
  • 类型:Function。
  • 说明:当用户点击某个标签时,会触发这个事件,并传递一个事件对象 e,其中包含当前选中的索引。
styleType
  • 作用:样式类型,设置为按钮样式。
  • 类型:String。
  • 默认值text
  • 说明:这里设置为 button,表示标签将以按钮的形式展示。
activeColor
  • 作用:选中状态的文字颜色。
  • 类型:String。
  • 说明:设置选中状态的文字颜色为 #4cd964

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

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

相关文章

NVIDIA Triton Inference Server 部署 yolov5

文章目录 一、拉取 tensorrt 、yolov5、tritonserver 镜像二、下载 yolov5-6.2、tensorrtx/yolov5-6.2源码三、pt转wts四、wts转engine五、创建triton推理服务器六、创建客户端进行测试 一、拉取 tensorrt 、yolov5、tritonserver 镜像 docker pull hakuyyf/tensorrtx:trt8.2_…

群晖NAS本地部署Photopea在线图片PS编辑工具

文章目录 前言1. 部署Photopea2. 运行Photopea3. 群晖安装Cpolar4. 配置公网地址5. 公网访问测试6. 固定公网地址 前言 本文主要介绍如何在群晖NAS本地部署Photopea在线图片PS编辑工具&#xff0c;并结合cpolar内网穿透实现公网环境远程访问本地部署的Photopea处理图片. Phot…

JAVA开源项目 员工绩效考核系统 计算机毕业设计

本文项目编号 T 021 &#xff0c;文末自助获取源码 \color{red}{T021&#xff0c;文末自助获取源码} T021&#xff0c;文末自助获取源码 目录 一、系统介绍1.1 业务分析1.2 用例分析 二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行…

梧桐数据库|中秋节活动·抽奖领取大闸蟹

有话说 众所周不知&#xff0c;我的工作就是做一个国产的数据库产品—中国移动梧桐数据库&#xff08;简称WuTongDB&#xff09;。 近期我们举办了一次小活动&#xff0c;来提升梧桐数据库的搜索量和知名度&#xff0c;欢迎大家来参加&#xff0c;免费抽奖领取大闸蟹哦~~~ 具…

AIGC入门:Comfyui整合包,解压即用!

前言 今天给大家分享的Comfyui的整合包&#xff0c;无需复杂的操作&#xff0c;解压即可使用。 整合包已经打包好了&#xff0c;获取方式放在&#x1f447;&#xff0c;需要的朋友可以自行领取哦。 什么是Comfyui ComfyUI采用节点式的操作方式&#xff0c;这种方式让用户能…

有哪些好用的终端行为审计系统?

终端行为审计软件是用于监控、记录和分析计算机终端操作行为的工具&#xff0c;它们对于提高企业信息安全管理、防止内部数据泄露和提升内控水平至关重要。 1. 金刚钻信息网站行为审计系统&#xff1a;通过细粒化审计终端用户行为&#xff0c;提供文件操作日志、文件外发日志、…

WRF-LES与PALM微尺度气象大涡模拟、PALM静态数据预备、PALM驱动数据预报、PALM模拟

查看原文>>>WRF-LES与PALM微尺度气象大涡模拟及ChatGPT在大气科学领域应用 针对微尺度气象的复杂性&#xff0c;大涡模拟&#xff08;LES&#xff09;提供了一种无可比拟的解决方案。微尺度气象学涉及对小范围内的大气过程进行精确模拟&#xff0c;这些过程往往与天气…

2024年身份验证技术应用的10大发展趋势

文章目录 前言一、无密码身份验证1、流行的无密码身份验证方法二、基于行为的身份识别技术1、主流的行为身份识别技术三、社交媒体授权登录1、应用社交媒体授权登录的好处四、去中心化身份验证1、去中心化身份验证的主要功能和优点五、自适应身份验证六、身份威胁检测和响应(I…

远程搜索:remote-method

为了启用远程搜索&#xff0c;需要将filterable和remote设置为true&#xff0c;同时传入一个remote-method。remote-method为一个Function&#xff0c;它会在输入值发生变化时调用&#xff0c;参数为当前输入值。需要注意的是&#xff0c;如果el-option是通过v-for指令渲染出来…

吐血整理nacos 作为springcloud的配置中心和注册中心

吐血整理nacos 作为配置中心和注册中心 环境版本nacos 版本 nacos启动单机模式启动配置数据库 Spring cloud 连接注册Nacos配置中心导入依赖 注册中心 环境版本 SpringBoot版本SpringCloud版本cloud Alibaba版本2.6.132021.0.52021.0.5.0 参照依据 spring-cloud-alibab 对应…

公众号赠书给您,祝您教师节快乐!

在此教师节即将来临之际&#xff0c;《人工智能怎么学》公众号恭祝各位老师们节日快乐&#xff01; 为了对各位老师表示最崇高的敬意&#xff0c;特开展教师节赠书活动。您只需要在9月15号22点前扫描下方二维码填写登记表&#xff0c;前5位登记的老师&#xff0c;每人均可获赠…

关于网卡用一会就无法使用的处理

1、背景 使用ubuntu 18操作系统&#xff0c;部署的.net 6的数采程序&#xff0c;使用嵌入式边缘计算终端&#xff0c;有一个网口&#xff0c;一个 wifi&#xff0c;一个中兴随身WIFI。数据程序通过网口与三菱Q系例PLC的转换器网口通讯&#xff0c;采集频率每60秒读一次PLC的点位…

DFS算法专题(二)——穷举vs暴搜vs深搜vs回溯vs剪枝【OF决策树】

目录 1、决策树 2、算法实战应用【leetcode】 2.1 题一&#xff1a;全排列 2.2.1 算法原理 2.2.2 算法代码 2.2 题二&#xff1a;子集 2.2.1 算法原理【策略一】 2.2.2 算法代码【策略一】 2.2.3 算法原理【策略二&#xff0c;推荐】 2.2.4 算法代码【策略二&#x…

【人工智能】Transformers之Pipeline(十六):表格问答(table-question-answering)

​​​​​​​ 目录 一、引言 二、表格问答&#xff08;table-question-answering&#xff09; 2.1 概述 2.2 基于BERT的表格问答模型—TAPAS&#xff08;TAble PArSing&#xff09; 2.3 应用场景​​​​​​​ 2.4 pipeline参数 2.4.1 pipeline对象实例化参数 2.4…

mysql 限制用户登录次数超过3次就 锁定账户在一段时间内不运行操作

这里是引用 主要实现步骤&#xff1a; 1.目测安装的mysql版本得是5.7.40往上&#xff0c;因为我的版本是5.7.14发现里面没有控制等下限制这个插件&#xff0c;插件具体的查看是在你安装目录下的lib/pugin下面 比如我的&#xff1a;C:\zz\ProgramFiles\MySQL\MySQL Server 5.7\l…

【VSCode扩展】通义灵码运行提示“此应用无法在你的电脑上运行”

&#x1f935; 作者&#xff1a;coderYYY &#x1f9d1; 个人简介&#xff1a;前端程序媛&#xff0c;目前主攻web前端&#xff0c;后端辅助&#xff0c;其他技术知识也会偶尔分享&#x1f340;欢迎和我一起交流&#xff01;&#x1f680;&#xff08;评论和私信一般会回&#…

AI模型“减肥”风潮:量化究竟带来了什么?

量化对大模型的影响是什么 ©作者|YXFFF 来源|神州问学 引言 大模型在NLP和CV领域的广泛应用中展现了强大的能力&#xff0c;但随着模型规模的扩大&#xff0c;对计算和存储资源的需求也急剧增加&#xff0c;特别是在资源受限的设备上面临挑战。量化技术通过将模型参数和…

【Transformer】Post-Norm和Pre-Norm

文章目录 Transformer中使用的Post-Norm大模型常用的Pre-NormPre-Norm一定比Post-Norm好吗&#xff1f;二者区别总结参考资料 Pre-Norm和Post-Norm的区别&#xff0c;是面试官非常喜欢问的问题。下面我们按照时间线&#xff0c;尽可能直白地讲清楚二者的区别。 直观来讲&#x…

【MySQL】MySQL表的增删改查(进阶篇)——之约束条件

前言&#xff1a; &#x1f31f;&#x1f31f;本期讲解关于MySQL表增删查改进阶篇&#xff0c;希望能帮到屏幕前的你。 &#x1f308;上期博客在这里&#xff1a;http://t.csdnimg.cn/cF0Mf &#x1f308;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 目录 …

什么是监督学习(Supervised Learning)

一、监督学习概述 监督学习&#xff08;Supervised Learning&#xff09;是一种极具威力的机器学习方法&#xff0c;能够训练算法以识别数据中的模式&#xff0c;并据此进行精准的预测或分类。借助已有的标记数据&#xff0c;监督学习模型学会了从输入到输出的映射关系&#x…