scroll-view.axml 1.4 KB

12345678910111213141516171819202122232425262728293031
  1. <view class="page">
  2. <view class="page-description">可滚动视图区域</view>
  3. <view class="page-section">
  4. <view class="page-section-title">vertical scroll</view>
  5. <view class="page-section-demo">
  6. <scroll-view scroll-y="{{true}}" style="height: 200px;" onScrollToUpper="upper" onScrollToLower="lower" onScroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
  7. <view id="blue" class="scroll-view-item bc_blue"></view>
  8. <view id="red" class="scroll-view-item bc_red"></view>
  9. <view id="yellow" class="scroll-view-item bc_yellow"></view>
  10. <view id="green" class="scroll-view-item bc_green"></view>
  11. </scroll-view>
  12. </view>
  13. <view class="page-section-btns">
  14. <view onTap="tap">next</view>
  15. <view onTap="tapMove">move</view>
  16. <view onTap="scrollToTop">scrollToTop</view>
  17. </view>
  18. </view>
  19. <view class="page-section">
  20. <view class="page-section-title">horizontal scroll</view>
  21. <view class="page-section-demo">
  22. <scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%" >
  23. <view id="blue2" class="scroll-view-item_H bc_blue"></view>
  24. <view id="red2" class="scroll-view-item_H bc_red"></view>
  25. <view id="yellow2" class="scroll-view-item_H bc_yellow"></view>
  26. <view id="green2" class="scroll-view-item_H bc_green"></view>
  27. </scroll-view>
  28. </view>
  29. </view>
  30. </view>