uniapp学习（006 萌宠案例）

ops/2024/10/23 17:29:13/

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

总时长 23:40:00 共116P

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

文章目录

    • 页面布局
      • 编写代码
    • 图片展示
      • 使用previewImage方法 实现图片数组预览
      • 懒加载
      • 遇到错误提示时 弹出错误提示
    • 触底刷新
    • 下拉刷新
    • 回到顶部
    • 扩展组件
      • 用分段器来实现筛选功能

页面布局

我们使用这个随机猫咪接口
随机猫咪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失效
在这里插入图片描述


http://www.ppmy.cn/ops/127881.html

相关文章

打开游戏提示丢失(或找不到)XINPUT1_3.DLL的多种解决办法

打开游戏提示丢失(或找不到)XINPUT1_3.DLL的多种解决办法

xinput1_3.dll是一个动态链接库（DLL）文件，它在Windows操作系统中扮演着重要的角色。该文件作为系统库文件，通常存放于C:\Windows\System32目录下（对于32位系统）或C:\Windows\SysWOW64目录下（对于…
阅读更多...
Flutter 运行报错Error (Xcode): Undefined symbol: _OBJC_CLASS_$_Log

Flutter 运行报错Error (Xcode): Undefined symbol: _OBJC_CLASS_$_Log

在Flutter开发过程中，我们可能会遇到各种编译错误，其中一种常见的错误是Xcode的链接器错误，表现为Undefined symbol和Linker command failed with exit code 1。这类错误通常发生在链接器无法找到某个函数或变量的定义时。以下是一些解决这类…
阅读更多...
Idea 2023.2.7构建SpringCloud多模块项目

Idea 2023.2.7构建SpringCloud多模块项目

Idea 2023.2.7构建SpringCloud多模块项目 本文介绍如何使用idea 2023.2.7构建基于SpringCloud alibaba微服务项目，基于Nacos注册中心。 环境准备： JDK版本：jdk17 SpringBoot:3.3.4 SpringCloud:2023.0.3 Nacos服务端:2.4.3 1、创建父工程&a…
阅读更多...
1.DBeaver连接hive数据库

1.DBeaver连接hive数据库

1.hive开启远程服务，linux中直接输入：hiveserver2 2.解压dbeaver和hive-jdbc-2.1.1.zip 3.双击打开 4.数据库，新建连接 5.搜索hive 6.配置参数 7.编辑驱动设置 8.添加jar包 9.测试连接 10.右击，新建sql编辑器 11.执行sql 12.调整字…
阅读更多...
基于SpringBoot 4S店车辆管理系统【附源码】

基于SpringBoot 4S店车辆管理系统【附源码】

基于SpringBoot 4S店车辆管理系统 效果如下： 管理员功能界面 销售员管理界面 维修员管理界面 客户管理界面 销售员功能界面 个人中心界面 维修员功能界面 物资信息管理界面 研究背景 随着科学技术发展，电脑已成为人们生活中必不可少的生活办公工具&am…
阅读更多...
微调小型Llama 3.2（十亿参数）模型取代GPT-4o

微调小型Llama 3.2（十亿参数）模型取代GPT-4o

微调Llama VS GPT-4o 别忘了关注作者，关注后您会变得更聪明，不关注就只能靠颜值了 ^_^。 一位年轻的儿科医生与一位经验丰富的医师，谁更能有效治疗婴儿的咳嗽？ 两者都具备治疗咳嗽的能力，但儿科医生由于专攻儿童医学…
阅读更多...
js实现数组中去掉重复的0或者去掉全部0

js实现数组中去掉重复的0或者去掉全部0

代码&#xff1a; <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Document</title>&l…
阅读更多...
基于SpringBoot+Vue的旅游服务平台【提供源码+答辩PPT+参考文档+项目部署】

基于SpringBoot+Vue的旅游服务平台【提供源码+答辩PPT+参考文档+项目部署】

&#x1f4a5; ① 前言&#xff1a;这两年毕业设计和毕业答辩的要求和难度不断提升&#xff0c;传统的JavaWeb项目缺少创新和亮点&#xff0c;往往达不到毕业答辩的要求&#xff01; ❗② 如何解决这类问题&#xff1f; 让我们能够顺利通过毕业&#xff0c;我也一直在不断思考、…
阅读更多...
最新文章

Copyright @ 2022~2023