微信小程序中scroll-view滚动视图组件

809 阅读2分钟

可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。官方文档
注意:scroll-x横向滚动需打开enable-flex属性以兼容 WebView。

主要属性

  1. scroll-x:允许横向滚动,默认false。
  2. scroll-y:允许纵向滚动,默认false。
  3. enable-flex:启用flexbox布局,wxss中也要设置弹性布局。WebView 特有属性。
  4. upper-threshold:距顶部/左边多远时,触发 scrolltoupper 事件,默认50。
  5. lower-threshold:距底部/右边多远时,触发 scrolltolower 事件,默认50。
  6. scroll-top:设置竖向滚动条位置,视图会跟着移动,类型number/string。
  7. scroll-left:设置横向滚动条位置,视图会跟着移动,类型number/string。
  8. scroll-into-view:值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素。类型string。优先级高于scroll-top。
  9. scroll-with-animation:在设置滚动条位置时使用动画过渡,默认false。
  10. enable-back-to-top:iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向。
  11. enable-passive:开启 passive 特性,能优化一定的滚动性能。
  12. enhanced:启用scroll-view增强特性,默认false。启用后可通过 ScrollViewContext 操作 scroll-view。WebView 特有属性。
  13. paging-enabled:分页滑动效果 (同时开启 enhanced 属性后生效),默认false。
  14. show-scrollbar:滚动条显隐控制 (同时开启 enhanced 属性后生效),默认true。
  15. binddragstart:滑动开始事件 (同时开启 enhanced 属性后生效),event.detail {scrollTop, scrollLeft}。
  16. binddragging:滑动事件 (同时开启 enhanced 属性后生效),event.detail {scrollTop, scrollLeft}。
  17. binddragend:滑动结束事件 (同时开启 enhanced 属性后生效),event.detail {scrollTop, scrollLeft, velocity速度 }
  18. bindscrolltoupper:滚动到顶部/左边时触发。
  19. bindscrolltolower:滚动到底部/右边时触发。
  20. bindscroll:滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}。