View
View container.
Type
ComponentType<ViewProps>
Examples
- React
- Vue
export default class PageView extends Component {
constructor() {
super(...arguments)
}
render() {
return (
<View className='components-page'>
<Text>flex-direction: row</Text>
<View className='flex-wrp' style='flex-direction:row;'>
<View className='flex-item demo-text-1'/>
<View className='flex-item demo-text-2'/>
<View className='flex-item demo-text-3'/>
</View>
<Text>flex-direction: column</Text>
<View className='flex-wrp' style='flex-direction:column;'>
<View className='flex-item flex-item-V demo-text-1'/>
<View className='flex-item flex-item-V demo-text-2'/>
<View className='flex-item flex-item-V demo-text-3'/>
</View>
</View>
)
}
}
<template>
<view class="components-page">
<text>flex-direction: row</text>
<view class="flex-wrp flex-wrp-row" hover-class="hover" >
<view class="flex-item demo-text-1" :hover-stop-propagation="true" />
<view class="flex-item demo-text-2" hover-start-time="1000" hover-class="hover" />
<view class="flex-item demo-text-3" hover-stayTime="1000" hover-class="hover" />
</view>
<text>flex-direction: column</text>
<view class="flex-wrp flex-wrp-column">
<view class="flex-item flex-item-V demo-text-1" />
<view class="flex-item flex-item-V demo-text-2" />
<view class="flex-item flex-item-V demo-text-3" />
</view>
</view>
</template>
<style>
.flex-wrp { display: flex; }
.flex-wrp-column{ flex-direction: column; }
.flex-wrp-row { flex-direction:row; padding: 20px; background: #f1f1f1; }
.flex-item { width: 180px; height: 90px; }
.demo-text-1 { background: #ccc; }
.demo-text-2 { background: #999; }
.demo-text-3 { background: #666; }
.hover {
background: #000;
}
</style>
ViewProps
Property | Type | Default | Required | Description |
---|---|---|---|---|
hoverClass | string | none | No | The style class of the button that is tapped. When hover-class="none" , the tap state is not displayed. |
hoverStyle | string | none | 否 | Since RN does not support Class, the View component on the RN side implements the hoverStyle property. hoverStyle is written similarly to style, except that it specifies the style to be pressed. |
hoverStopPropagation | boolean | fasle | No | Specifies whether to block the tapped state from the ancestor node of this node. |
hoverStartTime | number | 50 | No | Specifies the time elapsed after tapping but before the tapped state occurs. It is measured in milliseconds. |
hoverStayTime | number | 400 | No | Specifies the duration when the tapped state retains after stopping tapping. It is measured in milliseconds. |
catchMove | boolean | false | 否 | Block scrolling events from penetrating. |
Property Support
Property | WeChat Mini-Program | Baidu Smart-Program | Alipay Mini-Program | ByteDance Micro-App | H5 | React Native |
---|---|---|---|---|---|---|
ViewProps.hoverClass | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | |
ViewProps.hoverStyle | ✔️ | |||||
ViewProps.hoverStopPropagation | ✔️ | ✔️ | ✔️ | ✔️ | ||
ViewProps.hoverStartTime | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
ViewProps.hoverStayTime | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
API Support
API | WeChat Mini-Program | Baidu Smart-Program | Alipay Mini-Program | ByteDance Micro-App | H5 | React Native |
---|---|---|---|---|---|---|
View | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |