View

视图容器。相当于 web 的 div 或者 react-native 的 view。扫码体验:

img.jpg

属性名类型默认值描述最低版本
disable-scrollBooleanfalse是否阻止区域内滚动页面
hover-classString点击时添加的样式类
hover-start-timeNumber按住多久后出现点击状态,单位毫秒
hover-stay-timeNumber松开后点击状态保留时间,单位毫秒
hiddenbooleanfalse是否隐藏
classString自定义样式名
styleString内联样式
animation用于动画,详见 my.createAnimation
hover-stop-propagationBooleanfalse是否阻止当前元素的祖先元素出现点击态1.10.0
onTapEventHandle点击
onTouchStartEventHandle触摸动作开始
onTouchMoveEventHandle触摸后移动
onTouchEndEventHandle触摸动作结束
onTouchCancelEventHandle触摸动作被打断,如来电提醒,弹窗
onLongTapEventHandle长按 500ms 之后触发,触发了长按事件后进行移动将不会触发屏幕的滚动
onTransitionEndEventHandle过渡结束时触发1.8.0
onAnimationIterationEventHandle每开启一次新的动画过程时触发。(第一次不触发)1.8.0
onAnimationEndEventHandle动画结束时触发1.8.0
onAppearEventHandle当前元素可见时触发。1.9.0
onDisappearEventHandle当前元素从可见变为不可见时触发。1.9.0
onFirstAppearEventHandle当前元素首次可见时触发。1.9.4
注意:使用 my.createAnimation 生成的动画是通过 过渡 实现的,只会触发 onTransitionEnd。不会触发 onAnimationStart、onAnimationIteration、onAnimationEnd。

示例代码

  1. <view class="post">
  2. <!-- hidden -->
  3. <view class="postUser" hidden>
  4. <view class="postUser__name">Jessie</view>
  5. </view>
  6. <!-- hover class -->
  7. <view class="postBody" hover-class="red">
  8. <view class="postBody__content">
  9. 赞!
  10. </view>
  11. <view class="postBody__date">
  12. June 1
  13. </view>
  14. </view>
  15. </view>

原文: https://docs.alipay.com/mini/component/view