03-组件的基本使用

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

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

[view视图容器组件的用法]

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

[001 - 组件的属性]

image.png

[002 - 代码案例]

hover-stop-propagation阻止冒泡，子容器的变化 不自动触发父容器
hover-start-time 延迟多少毫秒后开始
hover-stay-time 停留多少毫秒结束

    <view class="box2" hover-class="box2_active">
        <view class="box" hover-class="box_active" hover-start-time="1000" hover-stay-time="1000" hover-stop-propagation> view测试
       </view>
    </view>

    .box{
        width:100px;
        height: 100px;
        background-color: red;
    }
    .box_active{
        width:100px;
        height: 100px;
        background-color: green;
    }
    
     .box2{
        width:200px;
        height: 200px;
        background-color: gray;
    }
    .box2_active{
        
        width:200px;
        height: 200px;
        background-color: yellow;
    }

[text文本组件的用法]

https://uniapp.dcloud.io/component/text

(http://notes.xiyanit.cn/#/uniapp/uniapp%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86?id=text%e6%96%87%e6%9c%ac%e7%bb%84%e4%bb%b6%e7%9a%84%e7%94%a8%e6%b3%95)

001 - text 组件的属性

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

• text 组件相当于行内标签、在同一行显示
• 除了文本节点以外的其他节点都无法长按选中
  测试时发现，小于号不支持

002 - 代码案例

<view>
  <!-- 长按文本是否可选 -->
  <text selectable='true'>来了老弟</text>
</view>

<view>
  <!-- 显示连续空格的方式 -->
  <view>
    <text space='ensp'>来了  老弟</text>
  </view>
  <view>
    <text space='emsp'>来了  老弟</text>
  </view>
  <view>
    <text space='nbsp'>来了  老弟</text>
  </view>
</view>

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

<view>
  <!-- 是否解码 -->
      <text decode='true'>
      空格&ensp;
      空格&emsp;
      and符&amp;
      大于号&gt;
      单引&apos; 
      小程序上小于号不支持
      </text>
</view>

[button按钮组件的用法] (http://notes.xiyanit.cn/#/uniapp/uniapp%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86?id=button%e6%8c%89%e9%92%ae%e7%bb%84%e4%bb%b6%e7%9a%84%e7%94%a8%e6%b3%95)

001 - 组件的属性

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

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

[002 - 案例代码]

<button size='mini' type='primary'>前端</button>

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

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

[image组件的使用]

image

图片。

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

Tips

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