当前位置: 首页 > 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…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

九天毕昇深度学习平台 | 如何安装库?

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...