uni-app中view和text组件和动画的使用

刺骨的言语ヽ痛彻心扉 2023-03-05 03:10 9阅读 0赞

### uni-app修炼之路（七） ###

*  view
 *  text

参考官方文档：[https://uniapp.dcloud.io/component/view][https_uniapp.dcloud.io_component_view]

# view #

视图容器。

它类似于传统html中的div，用于包裹各种元素内容。

如果使用nvue，则需注意，包裹文字应该使用组件。

属性说明

<table> 
 <thead> 
  <tr> 
   <th align="left">属性名</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">hover-class</td> 
   <td align="left">String</td> 
   <td align="left">none</td> 
   <td align="left">指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果</td> 
  </tr> 
  <tr> 
   <td align="left">hover-stop-propagation</td> 
   <td align="left">Boolean</td> 
   <td align="left">false</td> 
   <td align="left">指定是否阻止本节点的祖先节点出现点击态</td> 
  </tr> 
  <tr> 
   <td align="left">hover-start-time</td> 
   <td align="left">Number</td> 
   <td align="left">50</td> 
   <td align="left">按住后多久出现点击态，单位毫秒</td> 
  </tr> 
  <tr> 
   <td align="left">hover-stay-time</td> 
   <td align="left">Number</td> 
   <td align="left">400</td> 
   <td align="left">手指松开后点击态保留时间，单位毫秒</td> 
  </tr> 
 </tbody> 
</table>

如果使用 `<div>` ，编译时会被转换为 `<view>`

# text #

文本组件。

用于包裹文本内容。

属性说明

<table> 
 <thead> 
  <tr> 
   <th align="left">属性名</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">说明</th> 
   <th align="left">平台差异说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">selectable</td> 
   <td align="left">Boolean</td> 
   <td align="left">false</td> 
   <td align="left">文本是否可选</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">space</td> 
   <td align="left">String</td> 
   <td align="left"></td> 
   <td align="left">显示连续空格</td> 
   <td align="left">App、H5、微信小程序</td> 
  </tr> 
  <tr> 
   <td align="left">decode</td> 
   <td align="left">Boolean</td> 
   <td align="left">false</td> 
   <td align="left">是否解码 App、H5、微信小程序</td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

space 值说明

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">ensp</td> 
   <td align="left">中文字符空格一半大小</td> 
  </tr> 
  <tr> 
   <td align="left">emsp</td> 
   <td align="left">中文字符空格大小</td> 
  </tr> 
  <tr> 
   <td align="left">nbsp</td> 
   <td align="left">根据字体设置的空格大小</td> 
  </tr> 
 </tbody> 
</table>

注意

*  `<text>` 组件内只支持嵌套 `<text>`，不支持其它组件或自定义组件，否则会引发在不同平台的渲染差异。
 *  在app-nvue下，只有`<text>`才能包裹文本内容。无法在`<view>`组件包裹文本。
 *  decode 可以解析的有 `  < > & '    `。 各个操作系统的空格标准并不一致。
 *  除了文本节点以外的其他节点都无法长按选中。
 *  支持 `\n` 方式换行。
 *  如果使用 `<span>` 组件编译时会被转换为 `<text>`。

代码示例：

<template>
    	<view>
    		
    		<view class="view-box animated" hover-stay-time="1000" hover-class="view-box-hover rubberBand">view组件演示</view>
    		<text :selectable="true">text组件\n第 二 行</text>
    		
    	</view>
    </template>
    
    <script> export default { data() { return { //title: 'Hello' } }, onLoad() { }, methods: { } } </script>
    
    <style> .view-box{ width: 200upx; height:200upx; background:#09BB07; color: #FFFFFF; margin: 100upx; } .view-box-hover{ background: red; } </style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70]

[https_uniapp.dcloud.io_component_view]: https://uniapp.dcloud.io/component/view
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70]: /images/20230208/0f4935e7a88e4ba69939b1ecc0a94448.png