uniapp学习（006 萌宠案例）

最新推荐文章于 2025-11-13 09:35:08 发布
原创 最新推荐文章于 2025-11-13 09:35:08 发布 · 767 阅读 · 17 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #学习 #微信小程序 #小程序 #前端 #vue

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战，开发打包微信小程序、抖音小程序、H5、安卓APP客户端等

总时长 23:40:00 共116P

此文章包含第52p-第p60的内容

文章目录

页面布局

我们使用这个随机猫咪接口
随机猫咪Api接口
这里的limit可以写1和10 代表收到几条数据（仅支持1和10）
在这里插入图片描述

在这里插入图片描述

如果猫咪接口很慢或者图片加载不出来，也可以使用咸虾米接口
咸虾米Api接口库
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

编写代码

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

图片展示

使用previewImage方法 实现图片数组预览

传入第几张（index）和图片数组即可；

通过.map方法 把数组转变成只需要url的数组
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

懒加载

目前只支持小程序、h5不支持
在这里插入图片描述
加上属性lazy-load即可实现懒加载 只是加载当前页面需要的图片 其他图片等滚动到的时候再加载即可
在这里插入图片描述

在这里插入图片描述

遇到错误提示时 弹出错误提示

在这里插入图片描述

在这里插入图片描述

添加loading图标在这里插入图片描述
在这里插入图片描述

可以把loading放到标题旁边 这样比较好 不会影响手机操作
即 uni.showLoading()改成 uni.showNavgationBarLoading()
在这里插入图片描述

触底刷新

使用onTeachBottom生命周期
在这里插入图片描述

调用请求方法
在这里插入图片描述

解构追加数组
在这里插入图片描述

直接追加不推荐，因为改变了源

在这里插入图片描述
如果声明ref的话无所谓push还是concat或是结构，但如果reactive的话只能是push

下拉刷新

在pages.json里开启下拉刷新
在这里插入图片描述
在页面调用onPullDownRefresh

先清空数组 再请求api
在这里插入图片描述
刷新之后 记得手动停掉刷新动画
在这里插入图片描述

在这里插入图片描述

放到onpulldown内也可以

回到顶部

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
把屏幕的安全区空出来
在这里插入图片描述
在这里插入图片描述
安全区的高度
在这里插入图片描述

使用刷新方法

在这里插入图片描述
在这里插入图片描述

返回顶部
在这里插入图片描述

上升时间可以修改为100 速度快
在这里插入图片描述

扩展组件

在这里插入图片描述
也可以引入第三方ui框架，这里我们推荐官方ui
在这里插入图片描述

下载插件并导入hbuilderx
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
导入后 出现新的文件夹

在这里插入图片描述

然后直接复制即可使用
在这里插入图片描述
可以调整大小和颜色
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

加一个安全区域 calc方法记得加空格

在这里插入图片描述

在这里插入图片描述

用分段器来实现筛选功能

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
这里的下标是点击变化的
在这里插入图片描述
下拉刷新的时候记得把其改成0
在这里插入图片描述

这里咸虾米的API接口0点更新次数 提示key失效
在这里插入图片描述

【Scratch案例实操】Scratch萌宠运动会 scratch编程案例教学 scratch创意编程 少儿编程教案
青少年编程学习指导
07-29 5165
案例名称：Scratch萌宠运动会 学习目标： 了解如何绘制背景 熟练掌握Scratch坐标系，理解X坐标、Y坐标 掌握如何在Scratch中创建一个或多个变量，以及如何使用变量 PS：具体的单个指令模块详解可以查看《Scratch3.0入门教学》专栏 场景介绍： 想必每个小朋友都一定对西游记中师徒四人耳熟能详了吧，那么小朋友们你们更喜欢他们中的哪一个呢？ 是诚实善良、一项向佛的得道高僧唐僧 还是法力无边、降妖除魔的齐天大圣孙悟空 还是好吃懒做、憨厚单纯的前天蓬元帅猪八戒 亦或是沉默寡
6.8.【萌宠案例】使用uni-ui扩展组件
学习java的大雪笙一枚
04-22 837
这里我们可以使用uniapp内置组件-扩展插件，接下里会教会大家简单使用案例使用uni-icons 图标。
虾米API接口：item_search - 根据关键词取商品列表
QQ569893796的博客
08-30 1543
虾米API接口，通过关键字搜索获取商品列表 如：关键字搜索：dress API返回搜索返回结果，如下图 点击注册测试地址（获取Key和secret） Request address: //api.onebound.cn/shopee/api_call.php? q=dress&page=1&sort=&api_name=item_search&lang=zh-CN&key=&secret= ----------------------------------
vue3+uniapp咸虾米壁纸项目实战
weixin_65574176的博客
08-14 1946
目前已完成的效果如下所示，因为要自己去申请域名才能实现网络图片下载的api，有需要的朋友可以去咸虾米老师的视频教程了解。目前已完成的效果如下图所示，限于篇幅原因，因为代码真的太多了，写多了自己都头大，懒得搬过来了，请各位移步仓库QAQ。PS:这个项目后期需要给配置域名，得自己去申请。如果使用腾讯云服务的话，应该就不用了。uni-app官网 (dcloud.net.cn)项目实战教程 哔哩哔哩搜索 咸虾米。
random-cat-api
04-13
随机猫API 既然您已经使用过API，请学习如何梳理API文档！ 通过了解API可以做什么以及如何使用它，您将能够为您的项目和应用程序添加惊人的功能。 先决条件 DOM和事件 API和AJAX 指示 分叉并克隆此存储库。 切换到新目录。 满足列出的要求。 入门代码可在 。 您需要通过在原始存储库上发出拉取请求来提交提交。 要求 第1部分 首先，使用axios()向Cat API发出GET请求，然后控制台记录响应对象。 导航至并通读该文档。 在script.js ，使用axios()和“ Get a Random Kitty” URL发出GET请求，并控制台记录响应对象。 您如何知道请求是否成功？ 第2部分 接下来，每当用户单击按钮时，使用Cat API来显示随机猫的图像！ 您将向已为您提供的“随机猫”按钮添加功能。 添加功能，以便在单击“随机猫”按钮时，出现随机猫的图像！
自用免费有趣的测试、学习API接口
dandanmei0513的博客
02-26 914
自用免费有趣的测试、学习API接口
随机图片api接口网站整合
热门推荐
T3165919332的博客
05-17 1万+
会返回一张 800x600 的随机 Flickr 图片所以,如果需要在程序或网页中随机展示图片,可以使用以上网站提供的 API,很方便获得随机图片的地址和预览图。图片无版权问题,可以直接使用。会返回一个 800x600 的随机图片2. Lorem PicsumLorem Picsum 也是提供随机高清图片的网站,图片主要来源于 Unsplash。会返回一张 800x600 的随机图片3. PlacekittenPlacekitten 提供随机的 `kitten (小猫) 图片,图片尺寸也比较丰富。
萌宠俱乐部
04-27
在“萌宠俱乐部”这个项目中，我们看到的是一个与宠物相关的网站设计，它由四个主要页面构成。这个网站可能是为了展示宠物信息、提供宠物养护知识或是为宠物爱好者们搭建一个交流平台。从标签“html www”我们可以...
萌宠宜家商城-萌宠宜家商城系统-萌宠宜家商城系统源码-萌宠宜家商城管理系统-基于ssm的萌宠宜家商城系统-ssm-java代码
09-03
萌宠宜家商城系统是一个专门为宠物用品销售设计的在线商城平台，它基于Java语言开发，遵循了SSM框架的构建标准。SSM框架是由Spring、SpringMVC和MyBatis三个框架整合而成的一个高效、轻量级的Java EE企业级应用开发...
QML实现桌面萌宠完整工程
02-26
对于想要体验或学习QML编程的开发者来说，该项目可以作为一个很好的实践案例。通过查看博客文章中的效果展示，开发者可以对QML所具有的功能有直观的认识，从而对如何利用QML实现更加复杂和多样化的用户界面有更深的...
rancat：简单的nativescript应用会随机获取猫的图片
02-04
兰卡特 简单的nativescript应用程序使用Cat Api获取猫的随机图片 Google Play网址： ： id
学习：入门uniapp Vue3组合式API版本（10）
Nan_Shu_614的博客
07-26 1164
current 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张。在pages.json配置 "enablePullDownRefresh": true。OBJECT参数说明。
探索GetSomeCats项目：一个创新的猫咪图像生成器
gitblog_00022的博客
03-26 656
探索GetSomeCats项目：一个创新的猫咪图像生成器 去发现同类优质开源项目:https://gitcode.com/ 项目简介 GetSomeCats 是一个基于深度学习的开源项目，它使用先进的神经网络模型生成可爱的猫咪图像。这个项目旨在将人工智能的力量带入日常娱乐，让普通用户也能体验到AI创造的乐趣。通过简单的API调用或前端界面，你可以轻松获取一系列独特且有趣的猫咪图片。 技术分析 Ge...
【免费API】动物 animals
API开发
08-27 910
API 描述 Auth HTTPS CORS AdoptAPet - 帮助宠物被领养的资源 apiKey Yes Yes Cat Facts - 每日猫咪知识 No Yes No Cataas - 猫咪服务（猫咪图片和gif） No Yes No Cats - 来自Tumblr的猫咪图片 apiKey Yes No Dog Facts - 随机狗狗知识 No Yes Yes Dogs - 基于斯坦福大学的狗狗数据集 No Yes Yes eBird - 检索某个地区最
【萌宠案例】
2301_80735340的博客
07-28 628
then即使用result做一些事情，.catch是用于处理错误的；.finally即无论是否成功，都会执行。现在实现点击逻辑，分为三类：全部、猫猫、狗狗，点击后会显示相应的图片类型，在任意界面下拉刷新时回到全部界面。定义“刷新” “顶部” 两个按钮，为其设置CSS；然后定义点击刷新与界面滚动的方法。触底加载更多的实现，即将新加载内容与旧内容合并起来。下拉刷新的实现，即清空数组，然后重新加载。
【b站咸虾米】chapter5_uniapp-API_新课uniapp零基础入门到项目打包（微信小程序/H5/vue/安卓apk）全掌握
qq_37581764的博客
02-22 3271
课程地址：【新课uniapp零基础入门到项目打包（微信小程序/H5/vue/安卓apk）全掌握】 https://www.bilibili.com/video/BV1mT411K7nW/?
各种猫片获取方式
这里是菠萝味菠萝啤的博客
06-29 4590
先呈上地址：http://placekitten.com/ 此链接里面有各种猫咪的图片，只需要输入长宽，就可以获得相应大小的猫咪图片。
咸虾米壁纸项目——实战学习笔记8.1节内容 （API接口：傻瓜版讲解）
最新发布
BZGG123的博客
11-13 415
本课程笔记记录了在uniapp中使用Vue3组合式API对接首页三个网络API接口的完整过程。主要内容包括：1）通过async/await发起网络请求；2）使用ref创建响应式变量存储接口数据；3）模板层通过v-for渲染轮播图、公告栏等组件；4）详细讲解了从接口调用到数据渲染的全流程，包含请求头设置、数据校验、错误处理等关键步骤。笔记采用"采购员买菜"等生活化比喻解释编程概念，适合零基础学习者，并提供完整的项目代码示例和SCSS样式说明。
vue uniapp里照片多张照片展示
lgl的博客
03-13 593
view class="tit">照片展示</view>baseReq(`接口地址`, 'get').then(//多个照片之间用英文逗号拼接，得到数据后对照片进行分割。// 点击单张照片可以放大查看。//声明照片list。
桌面萌宠Bongo猫猫全键盘版
通过这个程序，用户可以在电脑桌面上看到一个虚拟的猫咪，它会根据用户的操作和设置做出各种可爱的互动，增添工作或学习的趣味性。 该程序的主要功能可能包括： 1. **动画互动**: 猫咪会做出各种萌态可掬的动作，...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值