This page is translated by Google Cloud Translation API

Switch to Chinese

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

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

• If the applet platform uses <div> , will be converted to at compile time<view>.
• App platform Vue2 project can try to use when there are many nodes<div>replace<view> to improve rendering performance.