English
All view components, including view, swiper, etc., do not display any visual elements themselves. Their purpose is to wrap other components that are actually displayed.
View container.
Similar to div in traditional html, it is used to wrap various element contents.
If using nvue, please note that the wrapped text should use the <text>
component.
Attribute description
Attribute name | Type | Defaults | Instruction |
---|---|---|---|
hover-class | String | none | Specify the style class after pressing. For hover-class="none", there is no effect of click state |
hover-stop-propagation | Boolean | false | Specifies whether to prevent the click state of the ancestor node of this node, App, H5, Alipay applet, Baidu applet do not support (Alipay applet, Baidu applet documents have this attribute , the actual measurement is not supported) |
hover-start-time | Number | 50 | How long does the click state appear after pressing, in milliseconds |
hover-stay-time | Number | 400 | Retention time of the click state after finger release, in milliseconds |
Example View demo
The following sample code comes from the hello uni-app project. It is recommended to use HBuilderX to create a new uni-app project and choose the hello uni-app template to quickly experience the complete example.
<!-- This example does not include the complete css, please refer to the above to obtain the external css. View it in the hello uni-app project -->
<template>
<view>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title uni-common-mt">
flex-direction: row
<text>\n横向布局</text>
</view>
<view class="uni-flex uni-row">
<view class="flex-item uni-bg-red">A</view>
<view class="flex-item uni-bg-green">B</view>
<view class="flex-item uni-bg-blue">C</view>
</view>
<view class="uni-title uni-common-mt">
flex-direction: column
<text>\n纵向布局</text>
</view>
<view class="uni-flex uni-column">
<view class="flex-item flex-item-V uni-bg-red">A</view>
<view class="flex-item flex-item-V uni-bg-green">B</view>
<view class="flex-item flex-item-V uni-bg-blue">C</view>
</view>
</view>
</view>
</template>
Tips
<div>
, will be converted to at compile time<view>
.when there are many nodes<div>
replace<view>
to improve rendering performance.