当前位置： 首页 > news >正文

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

news 2024/10/23 18:53:58

零基础入门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.mrgr.cn/news/56984.html

相关文章：

  • 展厅客流统计通过热力图分析热门展位，优化展位位置
  • AgentSims的沙盒模拟，BitNet是什么？Agent S 多智能体又是什么？#AIGC知识库精选10月N3...
  • 【OpenAI】第六节（语音生成与语音识别技术）从 ChatGPT 到 Whisper 的全方位指南
  • Data+AI下的云数仓未来已来！
  • 基于单片机优先级的信号状态机设计
  • 如何使用OpenSSL创建RSA证书文件？
  • 线程池常见面试题
  • hadoop
  • linux 编译安装的php7.4 开启pgsql，pdo_pgsql的扩展
  • 软件设计师考试大纲整理
  • JavaEE进阶----18.＜Mybatis补充（$和#的区别+数据库连接池）＞
  • 如何设置Page Cache的大小为默认值
  • 32 类和对象 · 中
  • 卡牌抽卡机小程序，带来新鲜有趣的拆卡体验
  • 2025秋招八股文--mysql篇
  • 日志分析工具-应急响应实战笔记
  • 网络不稳定？试试这款Figma的中文替代设计工具
  • LLaMA Factory环境配置
  • ERP、SCM与CRM：三大系统的区别与整合策略
  • Go语言开发环境搭建
  • 源代码防泄密技术正在更新迭代中
  • curl请求接口的三个坑
  • 117.WEB渗透测试-信息收集-ARL（8）
  • STM32CubeMX软件界面不清晰调整方法
  • 专利交易：开启知识产权变现之门
  • 大厂面试真题-说说Clickhouse比Hbase强在哪