全部产品
云市场
云游戏

view

更新时间:2020-03-25 19:40:52

视图容器,相当于 Web 的 div 标签或者 React Native 的 View 组件。

属性名 类型 默认值 描述 最低版本
disable-scroll Boolean false 是否阻止区域内滚动页面 -
hover-class String - 点击时添加的样式类 -
hover-start-time Number - 按住多久后出现点击状态,单位毫秒 -
hover-stay-time Number - 松开后点击状态保留时间,单位毫秒 -
hidden boolean false 是否隐藏 -
class String - 自定义样式名 -
style String - 内联样式 -
animation - - 用于动画,详见 my.createAnimation -
hover-stop-propagation Boolean false 是否阻止当前元素的祖先元素出现点击态 1.10.0
onTap EventHandle - 点击 -
onTouchStart EventHandle - 触摸动作开始 -
onTouchMove EventHandle - 触摸后移动 -
onTouchEnd EventHandle - 触摸动作结束 -
onTouchCancel EventHandle - 触摸动作被打断,如来电提醒、弹窗。 -
onLongTap EventHandle - 长按 500 ms 之后触发,触发了长按事件后进行移动将不会触发屏幕的滚动。 -
onTransitionEnd EventHandle - 过渡结束时触发 1.8.0
onAnimationIteration EventHandle - 每开启一次新的动画过程时触发。(第一次不触发) 1.8.0
onAnimationEnd EventHandle - 动画结束时触发。 1.8.0
onAppear EventHandle - 当前元素可见时触发。 1.9.0
onDisappear EventHandle - 当前元素从可见变为不可见时触发。 1.9.0
onFirstAppear EventHandle - 当前元素首次可见时触发。 1.9.4
说明:使用 my.createAnimation 生成的动画是通过 过渡 实现的,只会触发 onTransitionEnd;不会触发 onAnimationStartonAnimationIterationonAnimationEnd

代码示例

  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>