ScrollView

可滚动视图区域

属性

属性名类型默认值说明
scrollXBooleanfalse允许横向滚动
scrollYBooleanfalse允许纵向滚动
upperThresholdNumber50距顶部/左边多远时(单位 px),触发 scrolltoupper 事件
lowerThresholdNumber50距底部/右边多远时(单位 px),触发 scrolltolower 事件
scrollTopNumber设置竖向滚动条位置
scrollLeftNumber设置横向滚动条位置
scrollIntoViewString值应为某子元素 id(id 不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素
scrollWithAnimationBooleanfalse在设置滚动条位置时使用动画过渡
enableBackToTopBooleanfalseiOS 点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向
onScrollToUpperEventHandle滚动到顶部/左边,会触发 scrolltoupper 事件
onScrollToLowerEventHandle滚动到底部/右边,会触发 scrolltolower 事件
onScrollEventHandle滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

各端支持度

属性微信小程序H5ReactNative百度小程序支付宝小程序字节跳动小程序
scrollX二选一
scrollY二选一
upperThreshold
lowerThreshold
scrollTop
scrollLeft
scrollIntoViewx
scrollWithAnimation
enableBackToTop
onScrollToUpper
onScrollToLower
onScroll

使用竖向滚动时,需要给 <scroll-view/> 一个固定高度,通过 WXSS 设置 height。

示例:
  1. importTaro,{Component}from'@tarojs/taro'
  2. import{ScrollView,View}from'@tarojs/components'
  3. exportdefaultclassPageViewextendsComponent{
  4. constructor(){
  5. super(...arguments)
  6. }
  7. onScrollToUpper(){}
  8. // or 使用箭头函数
  9. // onScrollToUpper = () => {}
  10. onScroll(e){
  11. console.log(e.detail)
  12. }
  13. render(){
  14. const scrollStyle ={
  15. height:'150px'
  16. }
  17. const scrollTop =0
  18. constThreshold=20
  19. const vStyleA ={
  20. height:'150px',
  21. 'background-color':'rgb(26, 173, 25)'
  22. }
  23. const vStyleB ={
  24. height:'150px',
  25. 'background-color':'rgb(39,130,215)'
  26. }
  27. const vStyleC ={
  28. height:'150px',
  29. 'background-color':'rgb(241,241,241)',
  30. color:'#333'
  31. }
  32. return(
  33. <ScrollView
  34. className='scrollview'
  35. scrollY
  36. scrollWithAnimation
  37. scrollTop={scrollTop}
  38. style={scrollStyle}
  39. lowerThreshold={Threshold}
  40. upperThreshold={Threshold}
  41. onScrollToUpper={this.onScrollToUpper.bind(this)}// 使用箭头函数的时候 可以这样写 `onScrollToUpper={this.onScrollToUpper}`
  42. onScroll={this.onScroll}
  43. >
  44. <View style={vStyleA}>A</View>
  45. <View style={vStyleB}>B</View>
  46. <View style={vStyleC}>C</View>
  47. </ScrollView>
  48. )
  49. }
  50. }
Tips:
  • H5 中 ScrollView 组件是通过一个高度(或宽度)固定的容器内部滚动来实现的,因此务必正确的设置容器的高度。例如: 如果 ScrollView 的高度将 body 撑开,就会同时存在两个滚动条(body 下的滚动条,以及 ScrollView 的滚动条)。
  • 微信小程序 中 ScrollView 组件如果设置 scrollX 横向滚动时,并且子元素为多个时(单个子元素时设置固定宽度则可以正常横向滚动),需要通过 WXSS 设置 white-space 为 nowrap 来保证元素不换行,并对 ScrollView 内部元素设置 display 为 inline-block 来使其能够横向滚动。