【uni-app从入门到实战】组件和样式学习

【uni-app从入门到实战】组件和样式学习

文章目录

​​Text组件​​​​view组件​​​​button组件​​​​image组件​​​​样式学习​​

​​rpx​​​​import​​​​字体图标​​​​scss使用​​

​​组件使用入门教程​​

Text组件

Text 是文本组件，用于包裹文本内容。相当于 html 中的 span 标签。​​text组件官方文档​​

宇宙山河烂漫，生活点滴温暖宇宙 山河烂漫，生活 点滴温暖宇宙 山河烂漫，生活 点滴温暖宇宙 山河烂漫，生活 点滴温暖宇宙 山河烂漫，生活 点滴温暖

运行在 H5 的效果：

可以看到第二行是可以选中的

view组件

​​view组件官方文档​​

view 相当于 html 中的 div

​​box-active​​指定按下去的样式类

这是一个盒子

再看效果

我们来看下这两个属性的效果，由于这两个属性类型是数字，所以我们需要在前边增加​​:​​

这是一个盒子

可以看到我鼠标点了以后，并没有立刻改变颜色，而是2s后才触发改变颜色；鼠标离开后，颜色也没有立刻消失，而是3s后才消失

button组件

​​button组件官方文档​​

按钮 按钮 按钮 按钮 按钮 按钮 按钮

image组件

​​image组件官方文档​​

给 image 外增加一个 view 并设置背景色，可以清楚的看到 mode 取值不同时，图片的展示情况：​​aspectFit​​​保持纵横比缩放图片，使长边完全展示，​​aspectFill​​保持纵横比缩放图片，使短边完全展示

样式学习

​​css支持官方文档​​

rpx

uni-app 支持的通用 css 单位包括 px、rpx。rpx 之前没有用过，这里主要学习它， rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位

模拟机我们选择 iPhone6/7/8（设备宽高为375x667，可以理解为设备独立像素或css像素），dpr 为 2，即 1 个css像素相当于 2 个物理像素，所以物理像素就应该×2，为 750×1334

所以给 view 设置样式宽高为 750rpx 时会占满屏幕

给 view 设置样式宽高为 375rpx 时会占满屏幕一半

import

​​@import​​语句可以导入外联样式表

例如我们在 static 下新增一个 a.css

view{ background: red;}

在页面中引入

这样 view 的背景色就变成红色了

字体图标

​​字体图标官方文档​​

下载的 zip 文件解压后有如下文件：

复制 iconfont.css 和 iconfont.ttf 到项目的 static 目录下。由于字体文件的引用路径推荐使用以​​~@​​开头的绝对路径，所以我们修改 iconfont.css 中 iconfont.ttf 路径如下：

然后在 App.vue 中引入 iconfont.css

然后在页面中使用

这样图片就显示出来了

scss使用

首先需要安装插件。HBuilder 菜单栏：工具——插件安装，找到 scss/sass 编译 插件进行安装

这样就可以使用 scss 了，uni.scss 中的变量我们可以直接使用

例如我们设置 view 背景颜色为 ​​uni-color-success​​

运行程序，view 背景颜色即为变量颜色

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。