uni-app基础组件分析

发布时间：2023-04-24 12:38:18 所属栏目：教程来源：

导读：组件是视图层的基本组成单元，其实也就是我们经常写的 HTML 标签。有开始标签和结束标签的都可以理解为组件，比如 <div> </div> 、 <view> </view>。

uni-app 开发规范不推荐使用传统的 HTML 标签。uni-app 框架给

组件是视图层的基本组成单元，其实也就是我们经常写的 HTML 标签。有开始标签和结束标签的都可以理解为组件，比如 <div> </div> 、 <view> </view>。

uni-app 开发规范不推荐使用传统的 HTML 标签。uni-app 框架给我们提供了一系列基础组件，与传统 HTML 中的基础标签元素类似，与小程序中的标签元素是一样的，更适合手机端使用。比如 div 会被 view 标签代替，类似的还有 span 转 text 、a 转 navigator 等。

一开始开发会很不习惯，但很容易上手，并且我们不需要担心弄混，如果我们不小心写了 div 这种不符合 uni-app 开发规范的标签，也是不会报错的。在编译到非H5平台时编译器会帮我们转换为 view 标签。

我们可以基于这些 uni-app 组件快速搭建页面的基础结构。下面来看看一些常用组件的应用。

view 视图容器
view 相当于传统 HTML 中的 div。用来包裹各种元素内容。

属性说明
属性   类型   默认值   说明
hover-class   String   none   点击效果
hover-stop-propagation   Boolean   false   是否阻止本节点的祖先节点出现点击效果，默认不阻止
hover-start-time   Number   50   按住多久出现点击效果，单位毫秒
hover-stay-time   Number   400   手指松开后点击效果的保留时间，单位毫秒

实例
<template>
   <view class="Box" hover-class="click_active" :hover-start-time="100" :hover-stay-time='1000'>
   </view>
</template>
<style>
   .Box {
       height: px;
       background:black;
   }
   .click_active {
   background: red;
   }
</style>
效果：
我们把点击效果设置成了红色。点击后，红色效果会保留1000毫秒。

Tips：
如果不小心用了 <div> 标签，编译不会报错，会自动帮我们转换为 <view> 标签。
如果电脑网页版看不到点击效果，可以将切换到手机页面再试试。

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

实例
<template>
   <view>
       
       <view>
           <text selectable='true'>长按文本可选</text>
       </view>
       
       <view>
           
           <view>
               <text space='ensp'>网 imooc</text>
           </view>
           
           <view>
               <text space='emsp'>网 imooc</text>
           </view>
           
           <view>
               <text space='nbsp'>网 imooc</text>
           </view>
       </view>
   </view>
</template>
Tips：

如果用了 <span> 组件，编译时会被转换为 <text>。
组件内只支持嵌套 <text>，不支持其它组件或自定义组件，否则不同平台会有渲染差异。
decode 可以解析的有 < > & '。
除了文本节点以外的其他节点都无法长按选中。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!