View

View container.

Reference

Type

ComponentType<ViewProps>

Examples

React

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>
    )
  }
}

Vue

<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 hoverStyleproperty. 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	✔️	✔️	✔️	✔️	✔️	✔️