scroll-view.wxml 1.4 KB

1234567891011121314151617181920212223242526272829303132333435
  1. <import src="../../../common/head.wxml" />
  2. <import src="../../../common/foot.wxml" />
  3. <view class="container">
  4. <template is="head" data="{{title: 'scroll-view'}}"/>
  5. <view class="page-body">
  6. <view class="page-section">
  7. <view class="page-section-title">
  8. <text>Vertical Scroll\n纵向滚动</text>
  9. </view>
  10. <view class="page-section-spacing">
  11. <scroll-view scroll-y="true" style="height: 300rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
  12. <view id="demo1" class="scroll-view-item demo-text-1"></view>
  13. <view id="demo2" class="scroll-view-item demo-text-2"></view>
  14. <view id="demo3" class="scroll-view-item demo-text-3"></view>
  15. </scroll-view>
  16. </view>
  17. </view>
  18. <view class="page-section">
  19. <view class="page-section-title">
  20. <text>Horizontal Scroll\n横向滚动</text>
  21. </view>
  22. <view class="page-section-spacing">
  23. <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
  24. <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
  25. <view id="demo2" class="scroll-view-item_H demo-text-2"></view>
  26. <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
  27. </scroll-view>
  28. </view>
  29. </view>
  30. </view>
  31. <template is="foot" />
  32. </view>