All Products
Search
Document Center

View

Last Updated: Feb 04, 2021

View container, equivalent to the div tag of the Web or the View component of React Native.

Attribute Type Default value Description Minimum version
disable-scroll Boolean false Whether to prevent page scroll in the area. -
hover-class String - Style class added when you tap. -
hover-start-time Number - Time when the tapping state appears after you press and hold, in milliseconds. -
hover-stay-time Number - Duration of the tapping state after you loose. -
hidden boolean false Whether to hide. -
class String - Custom style name. -
style String - The inline style -
animation - - Used for animations. For details, see my.createAnimation. -
hover-stop-propagation Boolean false Whether to prevent the ancestor element of the current element from appearing the clicked state. 1.10.0
onTap EventHandle - Tap. -
onTouchStart EventHandle - Start the touch action. -
onTouchMove EventHandle - Move after the touch action. -
onTouchEnd EventHandle - End the touch action. -
onTouchCancel EventHandle - Tapping action interrupted by call reminder or pop-up window. -
onLongTap EventHandle - Triggered after you press and hold for 500 ms. After this event is triggered, the screen does not scroll when you move. -
onTransitionEnd EventHandle - Triggered when the transition ends. 1.8.0
onAnimationIteration EventHandle - Triggered every time when a new animation process is started. (It is not triggered at the first time.) 1.8.0
onAnimationEnd EventHandle - Triggered when the animation ends. 1.8.0
onAppear EventHandle - Triggered when the current element is visible. 1.9.0
onDisappear EventHandle - Triggered when the current element changes from visible to invisible. 1.9.0
onFirstAppear EventHandle - Triggered when the current element is visible for the first time. 1.9.4
Note: The animation that my.createAnimation generates is realized using transition and can trigger onTransitionEnd only. onAnimationStart, onAnimationIteration, or onAnimationEnd will not be triggered.

Code sample

 
  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. Nice!
  10. </view>
  11. <view class="postBody__date">
  12. June 1
  13. </view>
  14. </view>
  15. </view>