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>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

二-从C到C++

二-从C到C++

本章会介绍一些C拓展的非面向对象的功能 引用 1 概念 引用从一定程度上讲是指针的平替&#xff0c;几乎被所有的面向对象语言所使用。引用相当于对某一目标变量起“别名”。 操作这个别名&#xff0c;与操作原变量一样。&#xff08;操作同一块地址&#xff09;不能有相同别名 …
阅读更多...
ssrf之dict协议和file协议

ssrf之dict协议和file协议

1.dict协议 dict是什么协议呢&#xff1f; 定义&#xff1a;词典网络协议&#xff0c;在RFC 2009中进行描述。它的目标是超越Webster protocol&#xff0c;并允许客户端在使 用过程中访问更多字典。Dict服务器和客户机使用TCP端口2628。 官方介绍&#xff1a;http://dict.o…
阅读更多...
文件监控-IT安全管理软件

文件监控-IT安全管理软件

文件监控和IT安全管理软件是用于保护企业数据和网络安全的工具。这些工具可以帮助企业监控文件的变化&#xff0c;防止未经授权的访问和修改&#xff0c;并确保数据的安全性和完整性。 一、具有哪些功能 文件监控软件可以实时监控文件系统的活动&#xff0c;包括文件的创建、修…
阅读更多...
k8s配置安装ingress服务

k8s配置安装ingress服务

k8s配置安装ingress服务 在kuboard页面,网络安装 安装完配置名称保存 apiVersion: networking.k8s.io/v1 kind: Ingress metadata:namespace: testname: pipeline spec:ingressClassName: ingressrules:- host: test.pipeline.comhttp:paths:- path: /pathType: Prefixbacke…
阅读更多...
3D视觉-结构光测量法

3D视觉-结构光测量法

概述 结构光测量法是一种通过光学投射模块将具有编码信息的结构光投射到物体表面&#xff0c;在被测物表面上形成由被测物体表面形状调制的光条图像&#xff0c;再由图像采集系统采集被测物表面漫反射的光条图像&#xff0c;通过高精度算法处理后&#xff0c;得出被测物表面的三…
阅读更多...
oracle与mysql的分析函数(窗口函数)

oracle与mysql的分析函数(窗口函数)

分析函数定义 在SQL语句中&#xff0c;很多查询语句需要进行GROUP BY分组汇总&#xff0c;但是一旦经过分组&#xff0c;SELECT返回的记录数就会减少。为了保留所有原始行记录&#xff0c;并且仍可以进行分组数据分析&#xff0c;分析函数应运而生。 Oracle 8i 版本开始支持窗…
阅读更多...
WebService

WebService

调试工具&#xff1a;Postman、SoapUI Soap WebService :.net WCF 、Java CFX WebService三要素&#xff1a; SOAP&#xff08;Simple Object Access Protocol&#xff09;&#xff1a;用来描述传递信息的格式&#xff0c; 可以和现存的许多因特网协议和格式结合使用&#x…
阅读更多...
ClickHouse基础知识（六）：ClickHouse的副本配置

ClickHouse基础知识（六）：ClickHouse的副本配置

副本的目的主要是保障数据的高可用性&#xff0c;即使一台 ClickHouse 节点宕机&#xff0c;那么也可以 从其他服务器获得相同的数据。 1. 副本写入流程 2. 配置步骤 ➢ 启动 zookeeper 集群 ➢ 在hadoop101的/etc/clickhouse-server/config.d目录下创建一个名为metrika.xml…
阅读更多...
VUE3实现点击按钮下载文件功能

VUE3实现点击按钮下载文件功能

VUE3实现点击按钮下载文件功能 在写vue项目时&#xff0c;有个需求是点击表格中某一行的下载按钮&#xff0c;然后开始下载这一行对应的文件&#xff0c;效果如下&#xff1a; 表格每行的最右侧的蓝色按钮就是点击下载&#xff0c;这里涉及到原生的JavaScript写法&#xff0c;…
阅读更多...
Android集成OpenSSL实现加解密-集成

Android集成OpenSSL实现加解密-集成

导入so 将编译生成的 OpenSSL 动态库文件&#xff08;.so 文件&#xff09;复制到你的 Android 项目的 libs 目录中 导入头文件 将编译生成的include文件夹导入到项目中 build.gradle添加配置 defaultConfig {……testInstrumentationRunner "androidx.test.runner…
阅读更多...
Qt/C++音视频开发62-电子放大/按下选择区域放大显示/任意选取区域放大

Qt/C++音视频开发62-电子放大/按下选择区域放大显示/任意选取区域放大

一、前言 电子放大这个功能思考了很久&#xff0c;也是一直拖到近期才静下心来完整这个小功能&#xff0c;这个功能的前提&#xff0c;主要得益于之前把滤镜打通了&#xff0c;玩出花样来了&#xff0c;只要传入对应的滤镜字符串&#xff0c;就可以实现各种各样的效果&#xf…
阅读更多...
ssrf之curl协议，以及查看curl支持协议的办法

ssrf之curl协议，以及查看curl支持协议的办法

1.curl支持的协议 <?php phpinfo() ?> 将这个内容写在php中 打开小皮运行后可得 用ctrlf搜索curl得 可以查出curl所支持的协议 2.用ssrf获取信息 <?php function curl($url){ $chcurl_init();//创建cURL会话 curl_setopt($ch,CURLOPT_URL,$url);//设置cURL参…
阅读更多...
字符串转成时间的SQL，一个多种数据库通用的函数

字符串转成时间的SQL，一个多种数据库通用的函数

select date 2010-10-06 from dual; date 函数&#xff0c;此函数适用于&#xff1a; 1.MySQL数据库 2.Oracle数据库 3.达梦数据库 4.人大金仓数据库
阅读更多...
重装系统以后无法git跟踪

重装系统以后无法git跟踪

总结&#xff1a;权限问题 故障定位 解决方案&#xff1a; 复制一份新的文件夹。&#xff08;新建的文件创建和写入权限都变了&#xff09; 修改文件为新的用户 执行提示的命令
阅读更多...
OpenCV-Python(21):轮廓特征及周长、面积凸包检测和形状近似

OpenCV-Python(21):轮廓特征及周长、面积凸包检测和形状近似

2. 轮廓特征 轮廓特征是指由轮廓形状和结构衍生出来的一些特征参数。这些特征参数可以用于图像识别、目标检测和形状分析等应用中。常见的轮廓特征包括&#xff1a; 面积&#xff1a;轮廓所包围的区域的面积。周长&#xff1a;轮廓的周长&#xff0c;即轮廓线的长度。弧长&…
阅读更多...
idea 插件开发之 HelloWorld

idea 插件开发之 HelloWorld

前言 本文使用的 idea 2023.3 版本进行插件入门开发&#xff0c;首先要说明的是 idea 2023 版本及以后的 idea&#xff0c;对插件开发进行了一定程度的变动&#xff1a; 1、创建项目时不再支持 maven 选项 2、必须是 jdk17 及以后版本&#xff08;点击查看官网版本对应关系&…
阅读更多...
阿里云数据库PolarDB费用价格_MySQL版_PolarDB_分布式版

阿里云数据库PolarDB费用价格_MySQL版_PolarDB_分布式版

阿里云数据库PolarDB租用价格表&#xff0c;云数据库PolarDB MySQL版2核4GB&#xff08;通用&#xff09;、2个节点、60 GB存储空间55元5天&#xff0c;云数据库 PolarDB 分布式版标准版2核16G&#xff08;通用&#xff09;57.6元3天&#xff0c;阿里云百科aliyunbaike.com分享…
阅读更多...
留言板（Mybatis连接数据库版）

留言板（Mybatis连接数据库版）

目录 1.添加Mybatis和SQL的依赖 2.建立数据库和需要的表 3.对应表中的字段&#xff0c;补充Java对象 4.对代码进行逻辑分层 5.后端逻辑代码 之前的项目实例【基于Spring MVC的前后端交互案例及应用分层的实现】https://blog.csdn.net/weixin_67793092/article/details/134…
阅读更多...
Q-Tester：适用于开发、生产和售后的诊断测试软件

Q-Tester：适用于开发、生产和售后的诊断测试软件

Q-Tester.Expert是一款基于ODX&#xff08;ASAM MCD-2D / ISO 22901-1&#xff09;国际标准的工程诊断仪。通过此诊断仪可实现与ECU控制器之间的数据交互。这一基于ODX国际标准的解决方案&#xff0c;其优势在于&#xff1a;ODX数据库不仅可在开发部门交互&#xff0c;而且可在…
阅读更多...
力扣刷题记录（20）LeetCode：198、213、337

力扣刷题记录（20）LeetCode：198、213、337

198. 打家劫舍 我们从第一个开始分析&#xff1a; dp[i]:i表示索引&#xff0c;dp表示当前索引可以拿到的最高金额 索引为0时&#xff0c;可以拿到的最高金额为1&#xff1b; 索引为1时&#xff0c;可以拿到的最高金额就是在索引[0,1]之间取&#xff0c;为2 索引为2时&…
阅读更多...
最新文章

Copyright @ 2022~2023