uniapp学习（007-3 壁纸项目:系统高度等信息的操作）

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

总时长 23:40:00 共116P

此文章包含第79p-第p82的内容

文章目录

    • 自定义头部
      • 通屏
      • 我们自定义一个头部导航
      • 小程序的bug
      • 代码设计
    • 获取系统的一些高度信息
      • H5的设备信息
      • 小程序的安全区域和状态栏高度
      • 这里给头部添加高度
      • 抽离公共方法 实现兼容处理
      • 创建一个system.js作为公共使用方法
      • 得到屏幕状态栏高度
      • 得到标题bar高度
      • 得到填充区的高度
      • 修改抖音的bug
    • 实现各个页面的串联
      • 把标题组件的文字进行修改
      • 给图片详情页面添加返回按钮
      • 新建详情页面

自定义头部

这里我们使用修改，没加到全局里面是因为后面还要添加新的页面和测试，如果现在加到全局里面，那么新页面的调试就不方便跳转和返回了，除非写返回代码

通屏

在这里插入图片描述
加上之后 小程序会有刘海屏遮挡
在这里插入图片描述

我们自定义一个头部导航

在这里插入图片描述
这里的搜索框是假的 点击跳转到搜索页面
在这里插入图片描述
点击弹出搜索页面
在这里插入图片描述

在这里插入图片描述

小程序的bug

这里的自定义头部和状态栏重合了

在这里插入图片描述

在这里插入图片描述

要和胶囊按钮区域同行（标题bar）

在这里插入图片描述

代码设计

在这里插入图片描述

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

在这里插入图片描述

让其固定在上面
在这里插入图片描述
固定好了，滚动时不会动
在这里插入图片描述

这里让其和背景的颜色相同 就可以实现 滑动前颜色相同 滑动后还是有颜色
在这里插入图片描述

在这里插入图片描述

获取系统的一些高度信息

在API-设备-系统里找到 getSystemInfo 我们一般使用同步方法
在这里插入图片描述
使用很简单
在这里插入图片描述
在这里插入图片描述

H5的设备信息

在这里插入图片描述
安全区域
在这里插入图片描述
屏幕上方信息状态高度
在这里插入图片描述

小程序的安全区域和状态栏高度

在这里插入图片描述

这里的长宽信息都是px单位的

在这里插入图片描述

这里给头部添加高度

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

这里的胶囊按钮和我们的状态栏还有一定的高度差
在这里插入图片描述
并且下方也有点高度
在这里插入图片描述
因为我们在标题栏那里加了align-items=center 所以我们的高度跟状态栏高度一样的话 就可以居中对齐了
在这里插入图片描述

这是胶囊按钮的高度信息
在这里插入图片描述

h5直接报错 因为h5没有胶囊按钮
在这里插入图片描述

在这里插入图片描述

top是胶囊按钮到屏幕顶部的距离
在这里插入图片描述

在这里插入图片描述
我们只需要top和height即可
所以我们使用解构 来获取这些信息
在这里插入图片描述
两个间距加上胶囊按钮的高度 即可得出信息

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

可以添加ref
在这里插入图片描述

在这里插入图片描述

这里要加一个空的view 作为填充区 否则 banner被挡住了一半
在这里插入图片描述

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

在这里插入图片描述

抽离公共方法 实现兼容处理

创建一个system.js作为公共使用方法

在这里插入图片描述

也可以使用vue3自带的pinia

得到屏幕状态栏高度

使用export导出这个方法在这里插入图片描述

使用这个方法（解构出来）
在这里插入图片描述

在这里插入图片描述

得到标题bar高度

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

在这里插入图片描述

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

得到填充区的高度

在这里插入图片描述

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

修改抖音的bug

抖音小程序高度都正常，但是左边有个logo
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

判断抖音（头条系）的logo位置
在这里插入图片描述

让其left加上宽度即可
在这里插入图片描述

使用深度解构
在这里插入图片描述
给其加上一个margin-left
在这里插入图片描述
在这里插入图片描述

如果其他平台报错 可以使用条件编译写法ifdef
在这里插入图片描述

实现各个页面的串联

把标题组件的文字进行修改

我们给标题组件添加一个props
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

给图片详情页面添加返回按钮

位置太高
在这里插入图片描述

引入屏幕状态栏高度
在这里插入图片描述
在这里插入图片描述

没有高度的时候 加个15比较好 要不太靠上了
在这里插入图片描述
在这里插入图片描述

添加跳转方法
在这里插入图片描述
在这里插入图片描述

详情页面返回按钮添加返回上一层方法
在这里插入图片描述

在这里插入图片描述

新建详情页面

在这里插入图片描述

创建两个页面
在这里插入图片描述

个人不可以上传列表页面，所以这里的信息列表页面无法实现

我们只做详情页面

下载标签组件
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

CSS 设置网页的背景图片

CSS 设置网页的背景图片

背景 最近正好在写一个个人博客网站“小石潭记”，需要一张有水，有鱼的图片。正好玩原神遇到了类似场景，于是截图保存，添加到网站里面。以下是效果图： css 写个class，加到整个网页的body上 .bodyBg {ba…
阅读更多...
【数据结构与算法】队列——数据世界中的“有序使者”

【数据结构与算法】队列——数据世界中的“有序使者”

大家好，我是小卡皮巴拉 文章目录 目录 引言 一.队列的基本概念 1.1 队列的定义 1.2 队列的特性 1.3 队列的基本操作 二.队列的实现方式 2.1 基于链表的队列 2.2 基于数组的队列 三.基于链表的队列实现 定义链表队列的结构 初始化 入队列——向队列中插…
阅读更多...
Yocto构建i.MX处理器目标镜像

Yocto构建i.MX处理器目标镜像

1. 初始化构建环境 首先&#xff0c;通过运行imx-setup-release.sh脚本来初始化Yocto构建环境。此脚本的标准语法如下&#xff1a; $ DISTRO<distro name> MACHINE<machine name> source imx-setup-release.sh -b <build dir>DISTRO<distro configurati…
阅读更多...
10-15个工作站用Pr处理25个4K视频 性能要求

10-15个工作站用Pr处理25个4K视频 性能要求

在4K非编环境里&#xff0c;10-15台工作站运行Adobe Premiere&#xff0c;工作站跑25个4K ProRes 422 视频流。要求存储至少提供5GB/s的&#xff0c;2GB/s的读&#xff0c;并且提供650TB的空间。只有达到这样的要求&#xff0c;才能保证文件快速访问&#xff0c;以及编辑时做到…
阅读更多...
学习笔记——交换——STP（生成树）基本概念

学习笔记——交换——STP（生成树）基本概念

三、基本概念 1、桥ID/网桥ID (Bridege ID&#xff0c;BID) 每一台运行STP的交换机都拥有一个唯一的桥ID(BID)&#xff0c;BID(Bridge ID/桥ID)。在STP里我们使用不同的桥ID标识不同的交换机。 (2)BID(桥ID)组成 BID(桥ID)组成(8个字节)&#xff1a;由16位(2字节)的桥优先级…
阅读更多...
AD如何制作原理图的模版、原理图模板绘制修改以及如何导入原理图模版

AD如何制作原理图的模版、原理图模板绘制修改以及如何导入原理图模版

作为硬件工程师&#xff0c;制定原理图模板是一项至关重要的任务&#xff0c;旨在标准化和规范原理图的绘制过程。在AD20中制作、绘制修改以及导入原理图模板的步骤如下&#xff1a; 1制作原理图模板 首先需在AD原理图设计环境下新建一个原理图文件&#xff1b; 在原理图界面…
阅读更多...
VSCode离线安装插件

VSCode离线安装插件

下载最新的VSCode&#xff0c;安装。 打开VSCODE&#xff0c;打开左边的EXTENSINS(拓展)&#xff0c;打开 Install from VSIX&#xff0c;找到 .vsix的文件&#xff0c;打开安装。完成。 1&#xff09;去哪找插件&#xff0c;当然是插件官网了&#xff0c;插件官网&#xff0c;…
阅读更多...
12、论文阅读：SpikeYOLO：高性能低能耗目标检测网络

12、论文阅读：SpikeYOLO：高性能低能耗目标检测网络

SpikeYOLO：高性能低能耗目标检测网络 前言解释介绍相关工作论文提出的方法网络输入SpikeYOLO架构概述网络输出宏观设计微观设计I-LIF脉冲神经元LIFI-LIF实验代码前言 脉冲神经网络（Spiking Neural Networks, SNNs）具有生物合理性和低功耗的优势，相较于人工神经网络（Artif…
阅读更多...
KMP 算法

KMP 算法

目录 KMP 算法 算法思路 为什么不需要在主串中进行回退 计算 next 数组 代码实现 next 数组优化 查找所有起始位置 KMP 算法 KMP 算法是一种改进的字符串匹配算法&#xff0c;由 D.E.Knuth&#xff0c;J.H.Morris 和 V.R.Pratt 提出的&#xff0c;因此人们称它为 克努特…
阅读更多...
【ODSS】An Open Dataset of Synthetic Speech

【ODSS】An Open Dataset of Synthetic Speech

文章目录 An Open Dataset of Synthetic Speechkey pointsODSS数据集局限性An Open Dataset of Synthetic Speech 会议/期刊：WIFS 2023 作者： key points 一个由合成语音和自然语音组成的多语言、多说话人数据集ODSS，旨在促进合成语音检测的研究和基准测试。 是由156个声…
阅读更多...
Android compose 重建流程1

Android compose 重建流程1

前言 本文是笔者学习Compose是如何自动触发UI刷新的笔记,可能缺乏一定可读性和教导性.(建议阅读参考文献更具启发性) 使用以下BOM作为研究环境. composeBom "2024.04.01" androidx-compose-bom { group "androidx.compose", name "compose-bom…
阅读更多...
HarmonyOS Next应用开发——图像PixelMap压缩保存

HarmonyOS Next应用开发——图像PixelMap压缩保存

【高心星出品】 图片编码保存 图片编码指将PixelMap编码成不同格式的存档图片&#xff0c;当前支持打包为JPEG、WebP、png和 HEIF(不同硬件设备支持情况不同) 格式&#xff0c;用于后续处理&#xff0c;如保存、传输等。图片编码是图片解码-图片处理-图片保存的最后环节&…
阅读更多...
C#中的接口的使用

C#中的接口的使用

定义接口 public interface IMyInterface {int MyProperty { get; set; }void MyMethod(); } 实现类 internal class MyClass : IMyInterface {public int MyProperty { get; set; }public void MyMethod(){Console.WriteLine("MyMethod is called");} } 目录结构…
阅读更多...
负载箱的作用？

负载箱的作用？

负载箱&#xff0c;顾名思义&#xff0c;就是用来承载电力设备的箱子。在电力系统中&#xff0c;负载箱的作用非常重要&#xff0c;它不仅可以模拟实际的电力负载&#xff0c;还可以对电力设备进行测试和调试&#xff0c;确保其正常运行。下面详细介绍负载箱的作用。 1. 模拟实…
阅读更多...
深入了解Spring重试组件spring-retry

深入了解Spring重试组件spring-retry

在我们的项目中&#xff0c;为了提高程序的健壮性&#xff0c;很多时候都需要有重试机制进行兜底&#xff0c;最多就场景就比如调用远程的服务&#xff0c;调用中间件服务等&#xff0c;因为网络是不稳定的&#xff0c;所以在进行远程调用的时候偶尔会产生超时的异常&#xff0…
阅读更多...
这几次比赛题解

这几次比赛题解

因为考虑到再看&#xff0c;所以将所有题目都做成了pdf格式 梦熊十三连测 T1 这道题其实什么也不用想&#xff0c;就按照题目给的意思来打代码就行&#xff0c;这就有40分可以拿。懒人做法 #include<bits/stdc.h> using namespace std; typedef long long ll; ll read…
阅读更多...
MP9928模块分析

MP9928模块分析

MP9928 是一款高性能的同步降压 DC/DC 转换器控制器 IC&#xff0c;具有宽输入范围。以下是其操作和关键特性的总结&#xff1a; 概述 电流模式控制&#xff1a;MP9928 使用电流模式、可编程开关频率控制架构&#xff0c;通过外部 N 沟道 MOSFET 开关来调节输出电压。 反馈和…
阅读更多...
Golang | Leetcode Golang题解之第500题键盘行

Golang | Leetcode Golang题解之第500题键盘行

题目&#xff1a; 题解&#xff1a; func findWords(words []string) (ans []string) {const rowIdx "12210111011122000010020202" next:for _, word : range words {idx : rowIdx[unicode.ToLower(rune(word[0]))-a]for _, ch : range word[1:] {if rowIdx[unico…
阅读更多...
【uni-app学习-2】

【uni-app学习-2】

一、跳转 方法&#xff1a;在methods中去定义方法&#xff1a; 上述为直接跳转&#xff0c;但是当你要跳转页面是由多个可切换页面组成比如&#xff1a; 这个页面其实是由两个页面组成&#xff0c;一个主页&#xff0c;一个我的&#xff0c;两个页面 路由配置需要用到toob…
阅读更多...
房屋租赁网站毕业设计基于SpringBootSSM框架的计算机毕业设计

房屋租赁网站毕业设计基于SpringBootSSM框架的计算机毕业设计

计算机毕业设计/springboot/javaWEB/J2EE/MYSQL数据库/vue前后分离小程序 目录 一、项目背景与目的‌ ‌二、系统需求分析‌ 2.1功能需求 2.2 技术需求 2.3 可执行性 ‌三、系统设计与实现‌ ‌3.1系统架构设计‌&#xff1a; ‌3.2功能模块开发‌&#xff1a; ‌3.3…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023