跳到主要内容
版本：4.x

View

视图容器

支持情况：

参考文档

类型​

ComponentType<ViewProps>

示例代码​

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

ViewProps​

参数类型默认值必填说明
hoverClassstringnone否指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hoverStyleStyleProp<ViewStyle>none否由于 RN 不支持 hoverClass，故 RN 端的 View 组件实现了 hoverStyle属性，写法和 style 类似，只不过 hoverStyle 的样式是指定按下去的样式。
hoverStopPropagationbooleanfalse否指定是否阻止本节点的祖先节点出现点击态
hoverStartTimenumber50否按住后多久出现点击态，单位毫秒
hoverStayTimenumber400否手指松开后点击态保留时间，单位毫秒
disableScrollbooleanfalse否是否阻止区域内滚动页面。
说明： 如果 view 中嵌套 view，外层 view 设置 disable-scroll 为 true 时禁止内部的滚动。
hiddenbooleanfalse否是否隐藏。
animationTaroGeneral.IAnyObject{}否用于动画，详见 my.createAnimation 。使用 my.createAnimation 生成的动画是通过过渡（Transition）实现的，只会触发 onTransitionEnd，不会触发 onAnimationStart, onAnimationIteration, onAnimationEnd。
rolestring否表示组件的语义角色。设置为 img 时，组件聚焦后读屏软件会朗读出 图像 ；设置为 button 时，聚焦后读屏软件会朗读出 按钮 。详情请参见 aria-component。
ariaRolestring否无障碍访问，（角色）标识元素的作用
ariaLabelstring否无障碍访问，（属性）元素的额外描述
onTapCommonEventFunction否点击。
onTouchStartCommonEventFunction否触摸动作开始。
onTouchMoveCommonEventFunction否触摸后移动。
onTouchEndCommonEventFunction否触摸动作结束。
onTouchCancelCommonEventFunction否触摸动作被打断，如来电提醒，弹窗。
onLongTapCommonEventFunction否长按 500ms 之后触发，触发了长按事件后进行移动将不会触发屏幕的滚动。
onTransitionEndCommonEventFunction否过渡（Transition）结束时触发。
onAnimationIterationCommonEventFunction否每开启一次新的动画过程时触发。（第一次不触发）
onAnimationStartCommonEventFunction否动画开始时触发。
onAnimationEndCommonEventFunction否动画结束时触发。
onAppearCommonEventFunction否当前元素可见面积超过50%时触发。
onDisappearCommonEventFunction否当前元素不可见面积超过50%时触发。
onFirstAppearCommonEventFunction否当前元素首次可见面积达到50%时触发。
catchMoveboolean否是否以 catch 的形式绑定 touchmove 事件
version: 3.1.0+

API 支持度​

API微信小程序百度小程序支付宝小程序抖音小程序QQ 小程序京东小程序H5React NativeHarmonyHarmony hybrid
ViewProps.hoverClass✔️✔️✔️✔️✔️✔️✔️✔️(由于 RN 不支持 hoverClass，故 RN 端的 View 组件实现了 hoverStyle属性，写法和 style 类似，只不过 hoverStyle 的样式是指定按下去的样式。)✔️
ViewProps.hoverStyle✔️
ViewProps.hoverStopPropagation✔️✔️✔️✔️✔️✔️
ViewProps.hoverStartTime✔️✔️✔️✔️✔️✔️✔️✔️✔️
ViewProps.hoverStayTime✔️✔️✔️✔️✔️✔️✔️✔️✔️
ViewProps.disableScroll✔️
ViewProps.hidden✔️
ViewProps.animation✔️
ViewProps.role✔️
ViewProps.ariaRole✔️
ViewProps.ariaLabel✔️
ViewProps.onTap✔️
ViewProps.onTouchStart✔️
ViewProps.onTouchMove✔️
ViewProps.onTouchEnd✔️
ViewProps.onTouchCancel✔️
ViewProps.onLongTap✔️
ViewProps.onTransitionEnd✔️
ViewProps.onAnimationIteration✔️
ViewProps.onAnimationStart✔️
ViewProps.onAnimationEnd✔️
ViewProps.onAppear✔️
ViewProps.onDisappear✔️
ViewProps.onFirstAppear✔️
ViewProps.catchMove✔️✔️✔️✔️✔️✔️