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

于 2024-10-23 17:24:08 发布
阅读量980 收藏 29
点赞数 44
分类专栏： uniapp 文章标签： uni-app 学习 微信小程序 小程序 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wang_book/article/details/143164002
版权

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

总时长 23:40:00 共116P

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

文章目录

自定义头部

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

通屏

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

我们自定义一个头部导航

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

在这里插入图片描述

小程序的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比较好 要不太靠上了
在这里插入图片描述
在这里插入图片描述

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

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

在这里插入图片描述

新建详情页面

在这里插入图片描述

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

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

我们只做详情页面

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

在这里插入图片描述

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值