uni-app基础学习-组件的基本使用（二）

目录

text文本组件的使用

view视图容器组件的用法

button按钮组件的用法

image组件的使用

uni-app中的样式

---

 

uni-app提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼接称自己的应用

uni-app中的组件，就像 HTML 中的 div 、p、span 等标签的作用一样，用于搭建页面的基础结构

• text文本组件的使用

属性	类型	默认值	必填	说明
selectable	boolean	false	否	文本是否可选
space	string	.	否	显示连续空格，可选参数：ensp、emsp、nbsp
decode	boolean	false	否	是否解码

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

<view>
  <!-- 长按文本是否可选 -->
  <text selectable='true'>hello word</text>
</view>

<view>
  <!-- 显示连续空格的方式 -->
  <view>
    <text space='ensp'>hello word</text>
  </view>
  <view>
    <text space='emsp'>hello word</text>
  </view>
  <view>
    <text space='nbsp'>hello word</text>
  </view>
</view>

<view>
  <text>skyblue</text>
</view>

<view>
  <!-- 是否解码 -->
  <text decode='true'>&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;</text>
</view>

• view视图容器组件的用法

View 视图容器， 类似于 HTML 中的 div

<view class="box2" hover-class="box2_active">
  <view class='box1' hover-class='active' hover-stop-propagation :hover-start-time="2000" :hover-stay-time='2000'>
  </view>
</view>

• button按钮组件的用法

属性名	类型	默认值	说明
size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否按钮
loading	Boolean	false	名称是否带 loading t图标

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

<button size='mini' type='primary'>hello</button>

<button size='mini' type='default' disabled='true'>hello</button>

<button size='mini' type='warn' loading='true'>hello</button>

 

• image组件的使用

属性名	类型	默认值	说明	平台差异说明
src	String		图片资源地址
mode	String	'scaleToFill'	图片裁剪、缩放的模式

1. <image> 组件默认宽度 300px、高度 225px；
2. src 仅支持相对路径、绝对路径，支持 base64 码；
3. 页面结构复杂，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 中相同的选择器。

可以使用使用scss或者less （这需要在编辑器中安装插件）

<style lang='sass'>
    view{
        color:'#fff'
    }
</style>

 本篇文章讲解组件的基本使用，若有什么地方不明确或某些位置不太懂得请在评论中指出，后期我会继续出更多的基础教学谢谢各位支持 ，谢谢大家