当前位置: 首页 > news >正文

uniapp业务实现

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(() => {
//调用uni.request重新渲染数据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

轮播图实现



	<!-- 定义轮播图区域 --><view class="banner"><!-- 使用swiper组件实现轮播效果,配置指示器颜色和自动播放 --><swiper indicator-dots indicator-color="rgba(255, 255,255, 0.5)" indicator-active-color="#fff" autoplay><!-- 遍历swiperTop数组,为每个轮播图项创建swiper-item --><swiper-item v-for="item in swiperTop" :key="item.id"><!-- 为每个swiper-item添加图片,图片源由item.url指定 --><image :src="item.url"></image></swiper-item></swiper></view>

/*** 定义.banner类的样式,用于设置轮播图的容器样式*/
.banner {// 设置轮播图容器的宽度为750rpx,确保在不同设备上的显示效果一致width: 750rpx;// 设置轮播图容器的内边距,上下各30rpx,实现内容与边界的间距padding: 30rpx 0;/*** 定义swiper类的样式,用于设置轮播图的样式*/swiper {// 设置轮播图的宽度为750rpx,确保轮播图填满其容器width: 750rpx;// 设置轮播图的高度为340rpx,控制轮播图的展示大小height: 340rpx;/*** 定义swiper-item类的样式,用于设置轮播图中每个轮播项的样式*/swiper-item {// 设置轮播项的宽度为100%,确保轮播项填满swiper容器width: 100%;// 设置轮播项的高度为100%,确保轮播项填满swiper容器height: 100%;// 设置轮播项的内边距,左右各30rpx,实现内容与边界的间距padding: 0 30rpx;/*** 定义image类的样式,用于设置轮播图中图片的样式*/image {// 设置图片的宽度为100%,确保图片填满轮播项width: 100%;// 设置图片的高度为100%,确保图片填满轮播项height: 100%;// 设置图片的圆角为10rpx,实现图片边角的圆滑过渡效果border-radius: 10rpx;}}}
}

//顶层轮播图数据
var swiperTop = ref([{id: 1,url: '../../common/images/banner1.jpg'
}, {id: 2,url: '../../common/images/banner2.jpg'
}, {id: 3,url: '../../common/images/banner3.jpg'
}])

图片预览


/*** 预览图片函数* * 该函数用于预览一系列图片中的某一张* 它首先收集所有宠物的图片URL,然后使用uni.previewImage方法进行预览* * @param {number} index 需要预览的图片的索引*/
function onPreview(index) {// 收集所有宠物的图片URLvar urls = pets.value.map(item => item.url)// 使用uni.previewImage方法预览图片,传入当前图片的索引和所有图片的URL列表uni.previewImage({current: index,urls: urls})
}

相关文章:

uniapp业务实现

uni.requset添加异常判断提示,以及加载动画 /*** 该函数用于发送网络请求获取数据* 请求失败时会弹出相应的错误提示* 请求成功时会检查返回的数据是否存在错误&#xff0c;并根据错误代码做出相应处理* 如果数据请求成功且无错误&#xff0c;则将返回的数据赋值给pets变量*/fu…...

Windows和Mac命令窗快速打开文件夹

Windows explorer . 和 macOS open . 命令详解 1. Windows explorer . explorer 是 Windows 上的文件资源管理器&#xff0c;用于通过命令行打开文件夹或文件。 常用命令格式&#xff1a; explorer [选项] [目标路径]. 表示当前目录&#xff0c;explorer . 打开当前工作目录…...

智能制造云平台---附源码79117

目 录 摘要 1 绪论 1.1 研究背景和意义 1.2开发技术 1.2.1 Flask框架 1.2.2 Python简介 1.2.3 MySQL数据库 1.3论文结构与章节安排 2系统分析 2.1 可行性分析 2.2总体设计原则 2.3 系统流程分析 2.3.1 用户登录流程 2.3.2 删除信息流程 2.4 系统角色分析 2.5 系…...

降本、创新、合作,谁才是连接器行业破除内卷的关键词?

如果用一个字来评价2024年的汽车行业&#xff0c;那就是「卷」。 ▲中国汽车保有量不断提升 图/Pixabay 长安汽车董事长朱华荣说&#xff1a;“汽车行业的卷&#xff0c;让中国品牌达到了新高度。” 吉利董事长李书福说&#xff1a;“中国汽车工业内卷程度全球第一&#xff0c;…...

可能一拆为二,英特尔为何走到今天这一步?

【科技明说 &#xff5c; 科技热点关注】 近来看到外媒消息说&#xff0c;英特尔迫于经营压力&#xff0c;也不得不铤而走险&#xff0c;欲将英特尔一分为二&#xff0c;即芯片制造与芯片设计分离开&#xff0c;互相剥离&#xff0c;独立发展。 于是乎&#xff0c;英特尔将分拆…...

了解Redis集群概念,集群如何选举主节点

请给胡广一个免费的三连吗&#xff1f;感谢&#xff01; 1. Redis集群 1.1 集群概念 Redis主从架构和Redis集群架构是两种不同的概念&#xff0c;大家刚接触Redis时经常弄混淆。胡广给大家贴下Redis官网对两者的解释。 &#xff08;1&#xff09;Redis主从架构 Redis主从实…...

Ozon跨境商家提升销量的关键:测评补单策略与必备条件

Ozon&#xff0c;自1998年创立以来&#xff0c;已稳居俄罗斯多品类电商领域的领导地位&#xff0c;不仅是俄罗斯最为人所熟知的电商品牌&#xff0c;更是该国电商行业的先驱之一。那么&#xff0c;对于希望在Ozon平台上实现销售爆单的跨境卖家而言&#xff0c;他们需要满足哪些…...

缺乏大模型经验,还有机会吗?

做大模型一年半&#xff0c;经历了无数场面试。 关于经验&#xff0c;我最常听到的候选人(尤其是学生)的说辞是:我没有大模型经验&#xff0c;可以给个机会吗&#xff1f;答案是&#xff0c;我们并不看重候选人的大模型训练经验。这里不是说经验不重要&#xff0c;而是大部分人…...

如何阅读李冬梅老师《数据结构》

根据《如何阅读一本书》第五章&#xff1a;主动阅读的基础&#xff1a;阅读者要提出的4个基本问题&#xff1f; 以第2章&#xff0c;线性表为例&#xff1a; &#xff08;1&#xff09;本章主要在谈些什么&#xff1f;例如第二章简介&#xff0c;读完这一章可以自己试着写个简…...

Python————正则表达式

正则表达式 前言一、正则表达式是什么&#xff1f;二、使用模块 re三、re 模块中的代码图示3.1 re模块匹配单个字符3.2 re模块匹配多个字符3.3 re模块匹配开头跟结尾3.4 re模块匹配分组3.5 扩展: 总结 前言 在实际开发过程中经常会有查找符合某些规则的字符串 比如&#xff1a…...

将你的github仓库设置为web代理

将你的github仓库设置为web代理 废话不多说&#xff0c;直接上步骤 废话不多说&#xff0c;直接上步骤 创建一个仓库&#xff0c;上传静态web。 2. 设置仓库的 page 1&#xff09;点击 “Settings” 如图设置...

CTFHub技能树-Git泄漏-Index

目录 一、Git索引&#xff08;Index&#xff09;的基本概念 二、解题过程 主旨&#xff1a;使用git泄漏恢复源代码 方法一&#xff1a;使用GitHack手动恢复 方法二&#xff1a;直接使用Git_Extract获取网站源代码拿去flag 当前大量开发人员使用git进行版本控制&#xff0c…...

vb.net发送邮件:如何高效地实现邮件发送?

vb.net发送邮件怎么配置服务器&#xff1f;怎么用vb.net发邮件&#xff1f; 如何高效地实现vb.net发送邮件&#xff0c;确保邮件能够快速、稳定地送达&#xff0c;是许多开发者面临的挑战。AokSend将深入探讨vb.net发送邮件的最佳实践&#xff0c;帮助您提升邮件发送的效率和可…...

mycat双主高可用架构部署-水评分表-范围分片配置

MySQL5.7服务器IP是192.168.31.209及192.168.31.210 vi /usr/local/mycat/conf/schema.xml <?xml version"1.0"?> <!DOCTYPE mycat:schema SYSTEM "schema.dtd"> <mycat:schema xmlns:mycat"http://io.mycat/"><schema n…...

开发模型例题

答案&#xff1a;A 解析&#xff1a;瀑布模型是跟对需求明确的项目 增量模型是将需求分为多个阶段&#xff0c;适合一开始需求不明确的 演化模型适合用户需求不清&#xff0c;需求经常变化的情况 螺旋模型适合庞大&#xff0c;复杂且具有高风险的系统...

一文搞懂 TS中 函数、枚举、别名 | TypeScript 入门指南 06

大家好&#xff0c;我是王天~ 这篇文章是 ts入门指南系列中第6 篇&#xff0c;主要讲解ts中的 函数、枚举、别名应用~ 如有不对的地方 欢迎留言反馈哈 函数 在TypeScript中&#xff0c;可选参数和默认参数、剩余参数以及函数重载可以帮助我们更灵活地定义和使用函数。 1、可…...

基于JAVA+SpringBoot+Vue的前后端分离的图书馆管理系统

基于JAVASpringBootVue的前后端分离的图书馆管理系统 前言 ✌全网粉丝20W,csdn特邀作者、博客专家、CSDN[新星计划]导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末附源码下载链接&#…...

基于SpringBoot+Vue的鲜花销售/鲜花商城/花店管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于JavaSpringBootVueMySQL的鲜花销售…...

信号发生器在扫描模式下输出正弦波信号,需要注意设置哪些参数

在信号发生器工作于扫描模式&#xff08;Sweep Mode&#xff09;并输出正弦波信号的情况下&#xff0c;需对设备进行以下关键参数设置&#xff1a; 1、波形设置 选择波形&#xff1a;正弦波&#xff08;Sine Wave&#xff09; 正弦波是常见的周期性波形&#xff0c;在扫描模式…...

xss-labs-master通关教程

一.level1 先来进行一下代码审计 <?php ini_set("display_errors", 0);//关闭错误显示 $str $_GET["name"]; //接受URL来的get形式的name传参 echo "<h2 aligncenter>欢迎用户".$str."</h2>";//在网页输出&#x…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

Docker拉取MySQL后数据库连接失败的解决方案

在使用Docker部署MySQL时&#xff0c;拉取并启动容器后&#xff0c;有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致&#xff0c;包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因&#xff0c;并提供解决方案。 一、确认MySQL容器的运行状态 …...

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...

麒麟系统使用-进行.NET开发

文章目录 前言一、搭建dotnet环境1.获取相关资源2.配置dotnet 二、使用dotnet三、其他说明总结 前言 麒麟系统的内核是基于linux的&#xff0c;如果需要进行.NET开发&#xff0c;则需要安装特定的应用。由于NET Framework 是仅适用于 Windows 版本的 .NET&#xff0c;所以要进…...

EasyRTC音视频实时通话功能在WebRTC与智能硬件整合中的应用与优势

一、WebRTC与智能硬件整合趋势​ 随着物联网和实时通信需求的爆发式增长&#xff0c;WebRTC作为开源实时通信技术&#xff0c;为浏览器与移动应用提供免插件的音视频通信能力&#xff0c;在智能硬件领域的融合应用已成必然趋势。智能硬件不再局限于单一功能&#xff0c;对实时…...

算法250609 高精度

加法 #include<stdio.h> #include<iostream> #include<string.h> #include<math.h> #include<algorithm> using namespace std; char input1[205]; char input2[205]; int main(){while(scanf("%s%s",input1,input2)!EOF){int a[205]…...