uni-appcss语法

锋哥原创的uni-app视频教程：

2023版uniapp从入门到上天视频教程(Java后端无废话版)，火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版)，火爆更新中...共计23条视频，包括：第1讲 uni-app简介、第2讲 uni-app环境搭建、第3讲 uni-app之HelloWorld实现等，UP主更多精彩视频，请关注UP账号。icon-default.png?t=N7T8https://www.bilibili.com/video/BV1eG411N71c/uni-app 的 css 与 web 的 css 基本一致。

尺寸单位

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

  • px 即屏幕像素

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

<template>个人中心页面<view class="c1"></view><view class="c2"></view>
</template>
​
<script>
</script>
​
<style lang="scss">.c1{width: 750rpx;height: 750rpx;background-color: $uni-color-error;}.c2{margin-top: 10px;width: 375rpx;height: 375rpx;background-color: $uni-bg-color-mask;}
</style>

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

common目录下新建test.css

.c3{margin-top: 10px;background-color: blue;width: 100rpx;height: 100rpx;
}

my.vue页面修改

加入 @import url("../common/test.css");

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

  • style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view :style="{color:color}" />

  • class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

<view class="normal_view" />

选择器

目前支持的选择器有：

选择器样例样例描述
.class.intro选择所有拥有 class="intro" 的组件
#id#firstname选择拥有 id="firstname" 的组件
elementview选择所有 view 组件
element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件
::afterview::after在 view 组件后边插入内容，仅 vue 页面生效
::beforeview::before在 view 组件前边插入内容，仅 vue 页面生效

注意：

  • 在 uni-app 中不能使用 * 选择器。

  • 微信小程序自定义组件中仅支持 class 选择器

  • page 相当于 body 节点，例如：

    <!-- 设置页面背景颜色，使用 scoped 会导致失效 -- > page {background-color: #ccc;
}

全局样式与局部样式

定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。

注意：

  • App.vue 中通过 @import 语句可以导入外联样式，一样作用于每一个页面。

  • nvue 页面暂不支持全局样式

CSS变量

uni-app 提供内置 CSS 变量

CSS 变量描述App小程序H5
--status-bar-height系统状态栏高度系统状态栏高度、nvue 注意见下25px0
--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 设定高度。下方提供了示例代码

代码块

快速书写 css 变量的方法是：在 css 中敲 hei，在候选助手中即可看到 3 个 css 变量。（HBuilderX 1.9.6 以上支持）

示例 1 - 普通页面使用 css 变量：

<template><!-- HBuilderX 2.6.3+ 新增 page-meta, 详情：https://uniapp.dcloud.io/component/page-meta --><page-meta><navigation-bar /></page-meta><view><view class="status_bar"><!-- 这里是状态栏 --></view><view>状态栏下的文字</view></view>
</template>
<style>.status_bar {height: var(--status-bar-height);width: 100%;}
</style>

<template><view><view class="toTop"><!-- 这里可以放一个向上箭头，它距离底部tabbar上浮10px--></view></view>
</template>
<style>.toTop {bottom: calc(var(--window-bottom) + 10px);}
</style>

示例 2 - nvue 页面获取状态栏高度

<template><view class="content"><view :style="{ height: iStatusBarHeight + 'px'}"></view></view>
</template>
​
<script>export default {data() {return {iStatusBarHeight: 0,};},onLoad() {this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;},};
</script>

固定值

uni-app 中以下组件的高度是固定的，不可修改：

组件描述AppH5
NavigationBar导航栏44px44px
TabBar底部选项卡HBuilderX 2.3.4 之前为 56px，2.3.4 起和 H5 调为一致，统一为 50px。（但可以自主更改高度）50px

各小程序平台，包括同小程序平台的 iOS 和 Android 的高度也不一样。

Flex布局

为支持跨平台，框架建议使用 Flex 布局，关于 Flex 布局可以参考外部文档A Complete Guide to Flexbox、阮一峰的 flex 教程等。

背景图片

uni-app 支持使用在 css 里设置背景图片，使用方式与普通 web 项目大体相同，但需要注意以下几点：

  • 支持 base64 格式图片。

  • 支持网络路径图片。

  • 小程序不支持在 css 中使用本地文件，包括本地的背景图和字体文件。需以 base64 方式方可使用。

  • 使用本地路径背景图片需注意：

    1. 为方便开发者，在背景图片小于 40kb 时，uni-app 编译到不支持本地背景图的平台时，会自动将其转化为 base64 格式；

    2. 图片大于等于 40kb，会有性能问题，不建议使用太大的背景图，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用。

    3. 本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。

    .test2 {background-image: url('~@/static/logo.png');
}

注意

  • 微信小程序不支持相对路径（真机不支持，开发工具支持）

字体图标

uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：

  • 支持 base64 格式字体图标。

  • 支持网络路径字体图标。

  • 小程序不支持在 css 中使用本地文件，包括本地的背景图和字体文件。需以 base64 方式方可使用。

  • 网络路径必须加协议头 https。

  • 从 http://www.iconfont.cn 上拷贝的代码，默认是没加协议头的。

  • 从 http://www.iconfont.cn 上下载的字体文件，都是同名字体（字体名都叫 iconfont，安装字体文件时可以看到），在 nvue 内使用时需要注意，此字体名重复可能会显示不正常，可以使用工具修改。

  • 使用本地路径图标字体需注意：

    1. 为方便开发者，在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；

    2. 字体文件大于等于 40kb，仍转换为 base64 方式使用的话可能有性能问题，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用；

    3. 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。

    @font-face {font-family: test1-icon;src: url('~@/static/iconfont.ttf');
}

nvue中不可直接使用 css 的方式引入字体文件，需要使用以下方式在 js 内引入。nvue 内不支持本地路径引入字体，请使用网络链接或者base64形式。src字段的url的括号内一定要使用单引号。

var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {fontFamily: 'fontFamilyName',src: "url('https://...')",
});

示例：

<template><view><view><text class="test">&#xe600;</text><text class="test">&#xe687;</text><text class="test">&#xe60b;</text></view></view>
</template>
<style>@font-face {font-family: 'iconfont';src: url('https://at.alicdn.com/t/font_865816_17gjspmmrkti.ttf') format('truetype');}.test {font-family: iconfont;margin-left: 20rpx;}
</style>

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

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

相关文章

Zookeeper之手写一个分布式锁

Zookeeper之手写一个分布式锁

前言 我之前写了一篇快速上手ZK的文章&#xff1a;https://blog.csdn.net/qq_38974073/article/details/135293106 本篇最要是进一步加深学习ZK&#xff0c;算是一次简单的实践&#xff0c;巩固学习成果。 设计一个分布式锁 对锁的基本要求 可重入&#xff1a;允许同一个应…
阅读更多...
跟小德学C++之配置文件（形式）

跟小德学C++之配置文件（形式）

嗨&#xff0c;大家好&#xff0c;我是出生在达纳苏斯的一名德鲁伊&#xff0c;我是要立志成为海贼王&#xff0c;啊不&#xff0c;是立志成为科学家的德鲁伊。最近&#xff0c;我发现我们所处的世界是一个虚拟的世界&#xff0c;并由此开始&#xff0c;我展开了对我们这个世界…
阅读更多...
命令模式-举例

命令模式-举例

开关和电灯之间并不存在直接耦合关系&#xff0c;在命令模式中&#xff0c;发送者与接收者之间引入了新的命令对象&#xff0c;将发送者的请求封装在命令对象中&#xff0c;再通过命令对象来调用接收者的方法。 命令模式的主要缺点如下&#xff1a; 使用命令模式可能会导致某…
阅读更多...
Android MVVM 写法

Android MVVM 写法

前言 Model&#xff1a;负责数据逻辑 View&#xff1a;负责视图逻辑 ViewModel&#xff1a;负责业务逻辑 持有关系&#xff1a; 1、ViewModel 持有 View 2、ViewModel 持有 Model 3、Model 持有 ViewModel 辅助工具&#xff1a;DataBinding 执行流程&#xff1a;View &g…
阅读更多...
视频监控EasyCVR如何通过设置sei接口，实现在webrtc视频流中添加画框和文字？

视频监控EasyCVR如何通过设置sei接口，实现在webrtc视频流中添加画框和文字？

安防视频监控系统基于视频综合管理平台EasyCVR视频系统&#xff0c;采用了开放式的网络结构&#xff0c;可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云存储等丰富的视频能力&#xff0c;具备权限管…
阅读更多...
传奇私服教程，新手小白速速下载！

传奇私服教程，新手小白速速下载！

传奇私服教程&#xff0c;新手小白速速下载&#xff01; 第二十课-封玩家账号登陆-封玩家机器码登陆.zip 第十九课-快速搭建FTP服务器教程配套工具.zip 第十八课-绿盟GOM1108引擎登陆器配置防劫持列表教... 第十七课-最新访问网站自动弹出加群教程.zip 修复沙城捐献不了或者捐献…
阅读更多...
Flutter BottomSheet 拖动分两段展示

Flutter BottomSheet 拖动分两段展示

第一段 第二段 实现思路 通过 GestureDetector 的 Drag 方法&#xff0c;动态改变Dialog的高度&#xff0c;通过设置一个最大高度和最小高度分成两层进行展示 实现 常用的展示BottomSheet的方法为 showModalBottomSheet /// 设置最高最好以高度的比例进行设置&#xff0c;方…
阅读更多...
FPGA设计时序约束十四、Set_External_Delay

FPGA设计时序约束十四、Set_External_Delay

一、序言 在时序约束中对clock的约束还存在一种特殊的延时约束set external delay。set external delay如字面含义&#xff0c;设置外部的时延值&#xff0c;但这个外部时延主要是指反馈时延&#xff0c;即信号从FPGA的output端口输出后经过外部电路回到输入端口的时延值。 二…
阅读更多...
Linux：线程优先级设置

Linux：线程优先级设置

目录 一、背景二、调整普通线程的优先级通过系统命令通过Linux C代码 三、调整实时线程的优先级通过系统命令通过Linux C代码 四、参考资料&#xff08;建议一定要阅读&#xff09; 在操作系统中&#xff0c;线程优先级决定了线程在 CPU 调度时的重要性。较高优先级的线程会在竞…
阅读更多...
服务器被黑了，记录一下

服务器被黑了，记录一下

前两天刚开的新的服务&#xff0c;立马被黑&#xff0c;哈哈。有懂这个是什么黑组织吗&#xff0c;哈哈 All your data is backed up. You must pay 0.017 BTC to 1KdmpErgS3isFf8FrLaTfGHLQPKNsv839G In 48 hours, your data will be publicly disclosed and deleted. (more i…
阅读更多...
GEE错误——‘xxx‘ did not match any bands.

GEE错误——‘xxx‘ did not match any bands.

这里我们在进行影像展示的时候会出现下面的错误，主要的原因是我们虽然进行了波段运算，但是依旧无法加载，主要原因是我们没有将计算过后的波段信息进行添加到我们的一个多波段影像，这里我们首先来看看代码出现的错误提示。当然这里只是给出了主要的问题，其实在进行波段运算…
阅读更多...
Visual Basic入门指南（一）

Visual Basic入门指南（一）

Visual Basic入门指南 Visual Basic是一种由微软公司开发的简单、易学的编程语言。它被广泛应用于Windows应用程序的开发&#xff0c;并且有着强大的可视化编程能力。本文将介绍Visual Basic的基础知识和常用技巧&#xff0c;帮助读者快速入门。 环境准备 随便找一个软件安装…
阅读更多...
java在线票务系统（选座）Myeclipse开发mysql数据库web结构java编程计算机网页项目

java在线票务系统（选座）Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java servlet 在线票务系统&#xff08;选座&#xff09;管理系统是一套完善的java web信息管理系统 系统采用serlvetdaobean&#xff08;mvc模式)&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要…
阅读更多...
PowerShell Instal 一键部署TeamCity

PowerShell Instal 一键部署TeamCity

前言 TeamCity 是一个通用的 CI/CD 软件平台，可实现灵活的工作流程、协作和开发实践。允许在您的 DevOps 流程中成功实现持续集成、持续交付和持续部署。 系统支持 Centos7，8，9/Redhat7，8，9及复刻系列系统支持 Windows 10,11,2012,2016,2019,2022高版本建议使用9系列系统…
阅读更多...
从0到1快速入门ETLCloud

从0到1快速入门ETLCloud

一、ETLCloud的介绍 ETL是将业务系统的数据经过抽取&#xff08;Extract&#xff09;、清洗转换&#xff08;Transform&#xff09;之后加载&#xff08;Load&#xff09;到数据仓库的过程&#xff0c;目的是将企业中的分散、凌乱、标准不统一的数据整合到一起&#xff0c;为企…
阅读更多...
CentOS7 系统安装

CentOS7 系统安装

系统下载 官方下载 清华源下载 安装流程 1. 选择安装系统 2. 选择安装语言 3. 设置网络链接 4. 设置静态IP ![img](https://img-blog.csdnimg.cn/img_convert/53bfedd54b838f95bd8bcb2efa232e23.png)设置时区 5. 磁盘设置&#xff0c;无特殊需求默认就好 6. 安装模式选择 7…
阅读更多...
Spark应用程序的结构与驱动程序

Spark应用程序的结构与驱动程序

Apache Spark是一个强大的分布式计算框架&#xff0c;用于处理大规模数据。了解Spark应用程序的结构和驱动程序是构建高效应用的关键。本文将深入探讨Spark应用程序的组成部分&#xff0c;以及如何编写一个Spark驱动程序来处理数据和执行计算。 Spark应用程序的结构 Spark应用…
阅读更多...
cleanmymac这个软件怎么样？值不值得下载

cleanmymac这个软件怎么样？值不值得下载

cleanmymac是我必装的mac端清理软件&#xff0c;界面简洁好看&#xff0c;完美适配mac系统&#xff0c;文件清理的速度、精度都比较优秀&#xff0c;还是比较不错的呢。cleanmymac作为一款第三方清洁应用程序&#xff0c;具有专业完整的清理功能&#xff0c;包括释放内存、一键…
阅读更多...
【Redis交响乐】Redis中的通用命令

【Redis交响乐】Redis中的通用命令

文章目录 1. 基本命令 get set2. 全局命令(1)keys(2)exists(3)del(4)expire && ttl面试题: redis中key的过期策略是怎么实现的?定时器的实现原理(1)基于优先级队列/堆(2)基于时间轮实现的定时器 (5) type 我们知道,redis是按照键值对的方式存储数据的. Redis中基本的命…
阅读更多...
根据文法求对应的语言

根据文法求对应的语言

技巧&#xff1a;最后得到的是终结符组成的闭包 例题&#xff1a; 文法G[S]: S-->AB A-->aAb|ab B-->Bc|&#xff0c;求对应的语言 ①S-->(aAb|ab)(Bc|) ②我们可以观察到&#xff0c;无论A-->aAb还是A-->ab&#xff0c;都一定会同时出现ab,…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023