本文共 1989 字，大约阅读时间需要 6 分钟。

此文为uni-app总结笔记（6）— 组件的基本使用

一： text文本组件的用法

text 组件的属性

• text 组件相当于行内标签、在同一行显示
• 除了文本节点以外的其他节点都无法长按选中

示例代码：

     
      
    
     你好呀
    
   
     
      
        
     
      你好呀  姐妹
       
      
        
     
      你好呀  姐妹
       
      
        
     
      你好呀  姐妹
       
    
   
     
    
     skyblue
    
   
     
      
    
       < > & '    
    
   

二： view视图容器组件的用法

属性说明：

说明：

三：button按钮组件的用法

属性说明：

• button 组件默认独占一行，设置 size 为 mini 时可以在一行显示多个

示例代码：

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

按钮效果显示：

属性说明：

Tips

• <image> 组件默认宽度 300px、高度 225px；
• src 仅支持相对路径、绝对路径，支持 base64 码；
• 页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 image{will-change: transform} ,可优化此问题。

五： uni-app中的样式

• rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。

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

• 支持基本常用的选择器class、id、element等

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

• page 相当于 body 节点

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

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

  • 字体文件小于 40kb，uni-app 会自动将其转化为 base64 格式；

  • 字体文件大于等于 40kb， 需开发者自己转换，否则使用将不生效；

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

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

字体库引用示例图，需更改iconfont.css中的路径为~@:

引入公共样式为全局样式【app.vue】示例图：

@import 使用示例图：

• 如何使用scss或者less

插件安装：

插件安装示例图：

安装scss或者less插件后，在style那边引入即可。

uni.scss

uni-app内置的常用样式变量，可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能

使用方法： 在uni.scss定义好，然后直接在页面引用即可。

uni.scss使用示例图：

转载地址：https://blog.csdn.net/tiffany_kim/article/details/115666623 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！