uniapp页面样式和布局和nvue教程详解

uniapp页面样式和布局和nvue教程

尺寸单位

uni-app 支持的通用 css 单位包括 px、rpx

  • px 即屏幕像素。
  • rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。但在 App 端和 H5 端屏幕宽度达到 960px 时，默认将按照 375px 的，屏幕宽度进行计算，具体配置参考：rpx计算配置

rpx 详细说明：

设计师在提供设计图时，一般只提供一个分辨率的图。严格按设计图标注的 px 做开发，在不同宽度的手机上界面很容易变形。而且主要是宽度变形。高度一般因为有滚动条，不容易出问题。由此，引发了较强的动态宽度单位需求。微信小程序设计了 rpx 解决这个问题。 uni-app 在 App 端、H5 端都支持了 rpx ，并且可以配置不同屏幕宽度的计算方式，具体参考：rpx计算配置。
rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。
开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如： 设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx。
换言之，页面元素宽度在 uni-app 中的宽度计算公式：750 * 元素在设计稿中的宽度 / 设计稿基准宽度
页面元素宽度在 uni-app 中的宽度计算举例说明：

  • 若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设 为： 750 * 100 / 750 ，结果为：100rpx。
  • 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设 为： 750 * 100 / 640 ，结果为：117rpx。
  • 若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设 为： 750 * 200 / 375 ，结果为：400rpx。

注意 ：
rpx 是和宽度相关的单位，屏幕越宽，该值实际像素越大。如不想根据屏幕宽度缩放，则应该使用 px 单位。如果开发者在字体或高度中也使用了 rpx ，那么需注意这样的写法意味着随着屏幕变宽，字体会变大、高度会变大。如果你需要固定高度，则应该使用px,rpx不支持动态横竖屏切换计算，使用rpx建议锁定屏幕方向。

全局样式与局部样式

定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。
注意：
App.vue 中通过 @import语句可以导入外联样式文件，一样作用于每一个页面。

<style>/*每个页面公共css */@import url("../../common/css/common.css");
</style>

uniapp页面样式和布局和nvue教程
效果：
uniapp页面样式和布局和nvue教程详解
APP和小程序中子组件会使用父组件的样式，H5端不会使用父组件的样式。

CSS变量

uni-app 提供内置 CSS 变量

CSS 变量描述App小程序H5
–status-bar-height系统状态栏高度系统状态栏高度250
–window-top内容区域距离顶部的距离00NavigationBar 的高度
–window-bottom内容区域距离底部的距离00TabBar 的高度

注意：

  • var(--status-bar-height) 此变量在微信小程序环境为固定 25px，在 App 里为手机实际状态栏高度。
  • 当设置 "navigationStyle":"custom" 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为var(--status-bar-height)的 view 放在页面顶部，避免页面内容出现在状态栏。
  • 由于在 H5 端，不存在原生导航栏和 tabbar，也是前端 div 模拟。如果设置了一个固定位置的居底 view，在小程序和 App 端是在 tabbar 上方，但在 H5 端会与 tabbar 重叠。此时可使用--window-bottom，不管在哪个端，都是固定在 tabbar 上方。
  • 目前 nvue 在 App 端，还不支持 --status-bar-height变量，替代方案是在页面 onLoad 时通过 uni.getSystemInfoSync().statusBarHeight 获取状态栏高度，然后通过 style 绑定方式给占位 view 设定高度。

示例：

<template><view><view class="status_bar"><!-- 这里是状态栏 --></view><view> 状态栏下的文字 </view></view>
</template>
<style>.status_bar {height: var(--status-bar-height);width: 100%;background: red;}
</style>

效果：
uniapp页面样式和布局和nvue教程详解

<template/> 和 <block/>

uni-app 支持在 template 模板中嵌套 <template/> 和 <block/> ，用来进行 列表渲染 和 条件渲染。
<template/> 和 <block/> 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
<block/> 在不同的平台表现存在一定差异，推荐统一使用 <template/> 。

<template><view><view class="box"><template v-if="test"><view>test为true,</view><view>test为true</view></template><template v-else><view>test为false,</view><view>test为false</view></template></view></view>
</template>
<script>export default {data() {return {test: false,}}}
</script><style>.box {display: flex;}
</style>

效果：
uniapp页面样式和布局和nvue教程详解

Flex 布局

为兼容多端跨平台运行，建议使用flex布局进行开发
阮一峰的flex教程：flex教程

{
display: flex;
flex-direction: row;
}

flex-direction 决定主轴的方向（即项目的排列方向）
flex-wrap 默认情况下，项目都排在一条线（又称"轴线"）上。
flex-wrap属性定义，如果一条轴线排不下，如何换 行。
flex-flow是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content 定义了项目在主轴上的对齐方式。
align-items 定义项目在交叉轴上如何对齐。
align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

nvue 教程

        uni-app App 端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。在 App 端，如果使用 vue 页面，则使用 webview 渲染；如果使用 nvue 页面(native vue 的缩写)，则使用原生渲染。一个 App 中可以同时使用两种页面，比如首页使用 nvue，二级页使用 vue 页面，hello uni-app 示例就是如此。
        虽然 nvue 也可以多端编译，输出 H5 和小程序，但 nvue 的 css 写法受限，所以如果你不开发 App，那么不需要使用 nvue。
        以往的 weex ，有个很大的问题是它只是一个高性能的渲染器，没有足够的 API 能力（比如各种 push sdk 集成、蓝牙等能力调用），使得开发时非常依赖原生工程师协作，开发者本来想节约成本，结果需要前端、iOS、Android 3 拨人开发，适得其反。 nvue 解决了这个问题，让前端工程师可以直接开发完整 App，并提供丰富的插件生态和云打包。这些组合方案，帮助开发者切实的提高效率、降低成本。
        如果一个页面路由下同时有vue页面和nvue页面，即出现同名的vue和nvue文件。那么在App端，会仅使用nvue页面，同名的vue文件将不会被编译到App端。而在非App端，会优先使用vue页面。

nvue开发与vue开发的常见区别

基于原生引擎的渲染，虽然还是前端技术栈，但和web开发肯定是有区别的。

  1. nvue 页面控制显隐只可以使用 v-if 不可以使用 v-show
  2. nvue 页面只能使用 flex 布局，不支持其他布局方式。页面开发前，首先想清楚这个页面的纵向内容有什么，哪些是要滚动的，然后每个纵向内容的横轴排布有什么，按 flex 布局设计好界面。
  3. nvue 页面的布局排列方向默认为竖排（ column ），如需改变布局方向，可以在 manifest.json -> app-plus -> nvue -> flex-direction 节点下修改，仅在 uni-app 模式下生效。
  4. nvue页面编译为H5、小程序时，会做一件css默认值对齐的工作。因为weex渲染引擎只支持flex，并且默认flex方向是垂直。而H5和小程序端，使用web渲染，默认不是flex，并且设置 display:flex 后，它的flex方向默认是水平而不是垂直的。所以nvue编译为H5、小程序时，会自动把页面默认布局设为flex、方向为垂直。当然开发者手动设置后会覆盖默认设置。
  5. 文字内容，必须、只能在 <text> 组件下。不能在 <div> 、 <view> 的text区域里直接写文字。否则即使渲染了，也无法绑定js里的变量。
  6. 只有 text 标签可以设置字体大小，字体颜色。
  7. 布局不能使用百分比、没有媒体查询。
  8. nvue 切换横竖屏时可能导致样式出现问题，建议有 nvue 的页面锁定手机方向。
  9. 支持的css有限，不过并不影响布局出你需要的界面， flex 还是非常强大的。
  10. 不支持背景图。但可以使用 image 组件和层级来实现类似web中的背景效果。因为原生开发本身也没有web这种背景图概念
  11. css选择器支持的比较少，只能使用 class 选择器。
  12. nvue 的各组件在安卓端默认是透明的，如果不设置 background-color ，可能会导致出现重影的问题。
  13. class 进行绑定时只支持数组语法。
  14. Android端在一个页面内使用大量圆角边框会造成性能问题，尤其是多个角的样式还不一样的话更耗费性能。应避免这类使用。
  15. nvue页面没有 bounce 回弹效果，只有几个列表组件有 bounce 效果，包括 list 、 recycle-list 、waterfall 。
  16. 原生开发没有页面滚动的概念，页面内容高过屏幕高度并不会自动滚动，只有部分组件可滚动（ list 、waterfall 、 scroll-view/scroller ），要滚得内容需要套在可滚动组件下。这不符合前端开发的习惯，所以在 nvue 编译为 uni-app模式时，给页面外层自动套了一个 scroller ，页面内容过高会自动滚动。（组件不会套，页面有 recycle-list 时也不会套）。
  17. 在 App.vue 中定义的全局js变量不会在 nvue 页面生效。 globalData 和 vuex 是生效的。
  18. App.vue 中定义的全局css，对nvue和vue页面同时生效。如果全局css中有些css在nvue下不支持，编译时控制台会报警，建议把这些不支持的css包裹在条件编译里， APP-PLUS-NVUE
  19. 不能在 style 中引入字体文件，nvue 中字体图标的使用参考：加载自定义字体。如果是本地字体，可以用plus.io 的API转换路径。
  20. 目前不支持在 nvue 页面使用 typescript/ts 。
  21. nvue 页面关闭原生导航栏时，想要模拟状态栏，可以参考文章。但是，仍然强烈建议在nvue页面使用原生导航栏。nvue的渲染速度再快，也没有原生导航栏快。原生排版引擎解析 json 绘制原生导航栏耗时少，而解析nvue的js绘制整个页面的耗时要大的多，尤其在新页面进入动画期间，对于复杂页面，没有原生导航栏会在动画期间产生整个屏幕的白屏或闪屏。

样式

  • nvue的css仅支持flex布局，是webview的css语法的子集。这是因为操作系统原生排版不支持非flex之外的web布局。当然flex足以排布出各种页面，只是写法需要适应。
  • 在选择器方面支持的较少，只支持简单的 class="classA" 。
  • class 进行绑定时只支持数组语法。
  • 不支持媒体查询。
  • 不支持复合样式，不支持简写。
  • 不能在 style 中引入字体文件。
  • 布局不能使用百分比，如 width：100%; 。
  • 有些web的css属性在nvue里无法支持，比如背景图。但可以使用image组件和层级来实现类似web中的背景效果。因为原生开发本身也没有web这种背景图概念。
  • nvue 的各组件在安卓端默认是透明的，如果不设置 background-color ，可能会导致出现重影的问题。
  • 文字内容，必须只能在 text 组件下， text 组件不能换行写内容，否则会出现无法去除的周边空白。
  • 只有 text 标签可以设置字体大小，字体颜色。

nvue 和 vue 相互通讯

uni.$emit(eventName,OBJECT)

触发全局的自定事件。附加参数都会传给监听器回调。
eventName类型String 事件名，OBJECT Object 触发事件携带的附加参数。

代码示例

uni.$emit('update',{msg:'页面更新'})
uni.$on(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。

示例：vue对nvue的传值通讯
uniapp页面样式和布局和nvue教程详解
index.vue页面代码

<template><view><button @click="sendMessage">点击修改数据</button></view>
</template><script>export default {data() {return {message: 'Hello from nVue'};},methods: {sendMessage() {uni.navigateTo({url: '../test/test',success: () => {// 确保目标页面已经加载uni.$emit('ceshi', {title: '测试标题',content: '测试内容'});}});}}};
</script>

test.nvue页面代码

<template><view><text>Test Page</text></view>
</template><script>
export default {onLoad() {// 注册事件监听器uni.$on('ceshi', (data) => {console.log('标题：' + data.title);console.log('内容：' + data.content);});},onUnload() {// 页面卸载时移除事件监听器uni.$off('ceshi');},methods: {}
};
</script><style scoped>
/* 可以在这里添加样式 */
</style>

效果：
uniapp页面样式和布局和nvue教程详解

uni.$once(eventName,callback)

监听全局的自定义事件。事件可以由uni.$emit触发，但是只触发一次，在第一次触发之后移除监听器。

属性类型描述
eventNameString事件名
callbackFunction事件回调函数
示例代码：
onLoad() {uni.$once('update',function(data){console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);})
}

示例：

<template><view><text>Test Page</text></view>
</template><script>export default {onLoad() {uni.$once('ceshi', function(data) {console.log('监听到事件来自 update ，携带参数 msg 为：' + data);})},onUnload() {// 页面卸载时移除事件监听器uni.$off('ceshi');},methods: {}};
</script><style scoped>/* 可以在这里添加样式 */
</style>

效果:
uniapp页面样式和布局和nvue教程详解

uni.$off([eventName, callback])

移除全局自定义事件监听器。

属性类型描述
eventNameArray[String]事件名
callbackFunction事件回调函数
示例代码
onUnload() {
// 移除 update 监听器
uni.$off('update')
}

上面中已经用到了uni.$off的使用，在每次onUnload页面卸载的时候移除事件监听。

Tips
  • 如果没有提供参数，则移除所有的事件监听器；
  • 如果只提供了事件，则移除该事件所有的监听器；
  • 如果同时提供了事件与回调，则只移除这个回调的监听器；
  • 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；

阶段完结~

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

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

相关文章

5G Non-Public Network(三)Public Network Integrated NPN

5G Non-Public Network(三)Public Network Integrated NPN

这篇我们来看下PNI-NPN，之前都没有提到NPN引入的背景，这里就简单看下。 NPN引入的背景如上，就不细说了，贴在这里，确实很简单的看了下。紧接着就来看下规范上的内容。 相比于SNPN，PNI-NPN是PLMN提供的NPN，内容也要少很多，下面的内容参考38.300，38.331 ，38.304，23.50…
阅读更多...
⾃动化运维利器Ansible-基础

⾃动化运维利器Ansible-基础

Ansible基础 一、工作原理二、快速入门2.1 测试所有资产的网络连通性2.2 发布文件到被管理节点(资产) 三、资产(被管理节点)3.1 静态资产3.1.1 自定义资产3.1.2 自定义资产的使用3.1.3 资产选择器 四、Ansible Ad-Hoc 命令4.1 模块类型4.1.1 command & shell 模块4.1.2 cop…
阅读更多...
一文了解Android中的AudioFlinger

一文了解Android中的AudioFlinger

AudioFlinger 是 Android 音频框架中的一个核心组件&#xff0c;负责管理音频流的混合和输出。它是 Android 音频系统服务的一部分&#xff0c;作为音频框架和硬件之间的桥梁&#xff0c;接收应用程序的音频请求、进行混音处理&#xff0c;并最终通过音频硬件输出声音。 下面我…
阅读更多...
基于YOLOv8深度学习的智慧交通事故评级检测系统研究与实现(PyQt5界面+数据集+训练代码)

基于YOLOv8深度学习的智慧交通事故评级检测系统研究与实现(PyQt5界面+数据集+训练代码)

本文研究并实现了一种基于YOLOv8深度学习模型的智慧交通事故评级检测系统&#xff0c;旨在解决传统交通事故检测过程中效率低、误报率高等问题。该系统通过深度学习技术的应用&#xff0c;结合交通事故图像的分析&#xff0c;能够实现对事故的精准识别和评级&#xff0c;进而为…
阅读更多...
以Java为例，实现一个简单的命令行图书管理系统，包括添加图书、删除图书、查找图书等功能。

以Java为例，实现一个简单的命令行图书管理系统，包括添加图书、删除图书、查找图书等功能。

江河湖海中的代码之旅&#xff1a;打造你的命令行图书管理系统 一、系统简介 1. Java简介 Java&#xff0c;这个编程语言界的“瑞士军刀”&#xff0c;自1995年诞生以来就以其跨平台的特性和强大的生态系统征服了无数开发者的心。想象一下&#xff0c;Java就像是一条蜿蜒曲折…
阅读更多...
使用MaxKB搭建知识库问答系统并接入个人网站（halo）

使用MaxKB搭建知识库问答系统并接入个人网站（halo）

首发地址&#xff08;欢迎大家访问&#xff09;&#xff1a;使用MaxKB搭建知识库问答系统并接入个人网站 前言 从OpenAI推出ChatGPT到现在&#xff0c;大模型已经渗透到各行各业&#xff0c;大模型也逐渐趋于平民化&#xff1b;从最开始对其理解、生成、强大的知识积累的惊叹&…
阅读更多...
Android15之解决：Dex checksum does not match for dex：framework.jar问题(二百三十九)

Android15之解决：Dex checksum does not match for dex：framework.jar问题(二百三十九)

简介&#xff1a; CSDN博客专家、《Android系统多媒体进阶实战》一书作者 新书发布&#xff1a;《Android系统多媒体进阶实战》&#x1f680; 优质专栏&#xff1a; Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a; 多媒体系统工程师系列【…
阅读更多...
消息队列原理面试题及参考答案

消息队列原理面试题及参考答案

什么是消息队列？ 消息队列是一种在不同应用程序组件或者系统之间进行异步通信的中间件技术。它就像是一个信息的 “中转站”。从技术层面来讲，消息队列主要由消息生产者、消息队列本身和消息消费者这几个核心部分构成。 消息生产者负责创建消息并将其发送到消息队列中。这些消…
阅读更多...
ubuntu16.04配置网卡

ubuntu16.04配置网卡

安装ubuntu16.04到最后选择安装服务时通过空格勾选 网卡 bond1 、集群内机器之间访问无网络限制 操作系统 raid1 数据盘得根据咱们的用途来看做raid几&#xff0c;如果用于ceph 就做单盘 raid0 &#xff0c;其他做raid5 操作系统 bc-euler 21.10 及以上或者 bc-龙蜥 8.2以上…
阅读更多...
css 溢出隐藏显示省略号

css 溢出隐藏显示省略号

单行文字超出隐藏&#xff1a; 要使用CSS使超出容器的文本隐藏并以省略号显示&#xff0c;可以使用以下属性&#xff1a; overflow:hidden: 设置为 hidden 以隐藏超出容器的内容。 text-overflow:ellipsis: 设置为 ellipsis 以显示省略号。 white-space:nowrap: 设置为 nowr…
阅读更多...
LLM学习笔记（5）微调 Fine-tuning

LLM学习笔记（5）微调 Fine-tuning

什么是微调&#xff08;Fine-tuning&#xff09;&#xff1f; 微调&#xff08;Fine-tuning&#xff09;是指在预训练模型&#xff08;如 GPT&#xff09;基础上&#xff0c;通过加入特定的数据对模型进行进一步训练&#xff0c;以优化其在某一特定任务或领域上的表现。它的主…
阅读更多...
oracle配置

oracle配置

# 切换至oracle用户 [rootlocalhost ~]# su - oracle# 连接,以 DBA 用户身份登录 SQL*Plus [oracledb ~]$ sqlplus / as sysdba# 查看现有表空间名称及存放路径 SQL> SELECT file_name,tablespace_name FROM dba_data_files;-- 创建表空间 zf CREATE TABLESPACE zf DATAFILE…
阅读更多...
【Unity基础】对比Unity中两种粒子系统

【Unity基础】对比Unity中两种粒子系统

在Unity中&#xff0c;Particle System和Visual Effect Graph (VFX) 都是用于创建粒子效果的工具&#xff0c;但它们的设计目标、使用场景和功能特点有所不同。以下是详细对比&#xff1a; 1. Particle System 特点 传统粒子系统&#xff0c;Unity自带的模块化粒子特效工具。…
阅读更多...
快速搭建Android开发环境：Docker部署docker-android并实现远程连接

快速搭建Android开发环境：Docker部署docker-android并实现远程连接

目录 前言 1. 虚拟化环境检查 2. Android 模拟器部署 3. Ubuntu安装Cpolar 4. 配置公网地址 5. 远程访问 小结 6. 固定Cpolar公网地址 7. 固定地址访问 作者简介&#xff1a; 懒大王敲代码&#xff0c;计算机专业应届生 今天给大家聊聊快速搭建Android开发环境&#x…
阅读更多...
CSS回顾-CSS选择器详解

CSS回顾-CSS选择器详解

一、引言 我来填坑啦&#xff01;之前在CSS基础知识详解中介绍过&#xff0c;CSS 是一门基于规则的语言。是由选择器与样式信息组成&#xff1a;选择器 {样式信息}。CSS 选择器是 CSS 规则的关键&#xff0c;能精准定位 HTML 元素&#xff0c;CSS3 新增选择器更是增强了设计能…
阅读更多...
第十二章 并行Stream流

第十二章 并行Stream流

目录 一、引言 二、获取并行Stream流的两种方式 三、并行和串行Stream流的效率对比 四、parallelStream线程安全问题 五、parallelStream背后的技术 5.1. Fork/Join框架介绍 5.2. Fork/Join原理-分治法 5.3. Fork/Join原理-工作窃取算法 5.4. Fork/Join案例 一、引言 …
阅读更多...
gitlab cicd搭建及使用笔记（二）

gitlab cicd搭建及使用笔记（二）

cicd之gitlab-runner使用要点 官方链接&#xff1a;https://docs.gitlab.com/runner/ 附历史文章链接 https://blog.csdn.net/qq_42936727/article/details/143624523?spm1001.2014.3001.5501 gitlab-runner常用命令及解释 gitlab-runner verify 容器内&#xff0c;检查注…
阅读更多...
2411rust,1.81,1.82

2411rust,1.81,1.82

1.81.0稳定版 core::error::错误 1.81稳定了核心中的Error特征,允许在#![no_std]库中使用特征.这样在相同错误特征上,可标准化更广泛的Rust生态系统,而不管库的环境. 新的排序实现 都已按新算法更新了标准库中的稳定和不稳定排序实现,从而改进了它们的运行时性能和编译时间…
阅读更多...
【EasyExcel】复杂导出操作-自定义颜色样式等（版本3.1.x）

【EasyExcel】复杂导出操作-自定义颜色样式等（版本3.1.x）

文章目录 前言一、自定义拦截器二、自定义操作1.自定义颜色1.1.样式未生效原因&#xff1a;1.2.解决方法&#xff1a; 2.合并单元格 三、复杂操作示例1.实体(使用了注解式样式)&#xff1a;2.自定义拦截器3.代码4.最终效果 前言 本文简单介绍阿里的EasyExcel的复杂导出操作&…
阅读更多...
Excel单元格中自适应填充多图

Excel单元格中自适应填充多图

实例需求&#xff1a;在Excel插入图片时&#xff0c;由于图片尺寸各不相同&#xff0c;如果希望多个图片填充指定单元格&#xff0c;依靠用户手工调整&#xff0c;不仅费时费力&#xff0c;而且很难实现完全填充。如下图中的产品图册&#xff0c;有三个图片&#xff0c;如下图所…
阅读更多...
最新文章

Copyright @ 2022~2023