View - 《Taro 文档帮助手册教程》

sidebar_label: View
Type
Examples
ViewProps
- Property Support
API Support

title: View

sidebar_label: View

View container.

Reference

Type

ComponentType<ViewProps>

Examples

import Tabs from ‘@theme/Tabs’; import TabItem from ‘@theme/TabItem’;

tsx

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

html
<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	✔️	✔️	✔️	✔️	✔️	✔️