字节跳动小程序开发组件文档 scroll-view

由 卓别林 创建, 最后一次修改 2019-08-07

可滚动视图区域。

属性名 类型 默认值 说明 最低版本
scroll-x Boolean false 设置为横向滚动 1.0.0
scroll-y Boolean false 设置为竖向滚动 1.0.0
upper-threshold Number 50 距顶部/左边多远时(单位px),触发 scrolltoupper 事件 1.0.0
lower-threshold Number 50 距底部/右边多远时(单位px),触发 scrolltolower 事件 1.0.0
scroll-top Number 设置竖向滚动条位置 1.0.0
scroll-left Number 设置横向滚动条位置 1.0.0
scroll-into-view String 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素 1.0.0
scroll-with-animation Boolean false 在设置滚动条位置时使用动画过渡 1.0.0
bindscroll EventHandler 滚动时触发 1.0.0
bindscrolltoupper EventHandler 滚动到顶部/左边 1.0.0
bindscrolltolower EventHandler 滚动到底部/右边 1.0.0
使用竖向滚动时,需要给一个固定高度,通过 ttss 设置 height。scroll-into-view只能包含[-_a-zA-Z0-9]
WARNING
不能在scroll-view中使用video、textarea、ad等原生组件 为了保证用户体验,在scroll-view中滚动时不会触发页面回弹,所以不能触发onPullDownRefresh

示例


开发者工具中预览

<view class="page-section-title">
    <text>Vertical Scroll\n纵向滚动</text>
</view>

<scroll-view style="height: 300rpx;"
    scroll-y
    scroll-with-animation
    bindscrolltoupper="upper"
    bindscrolltolower="lower"
    bindscroll="scroll"
    scroll-into-view="{{toView}}"
    scroll-top="{{scrollTop}}"
>
  <view id="demo1" class="scroll-view-item demo-text-1"></view>
  <view id="demo2"  class="scroll-view-item demo-text-2"></view>
  <view id="demo3" class="scroll-view-item demo-text-3"></view>
</scroll-view>

<button bindtap="tap">Scroll into</button>
<button bindtap="tapMove">Move</button>

<view class="page-section-title">
    <text>Horizontal Scroll\n横向滚动</text>
</view>

<scroll-view class="scroll-view_H" scroll-x style="width: 100%">
    <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
    <view id="demo2"  class="scroll-view-item_H demo-text-2"></view>
    <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
</scroll-view>

var order = ['demo1', 'demo2', 'demo3']
Page({
  data: {
    toView: 'demo1',
    scrollTop: 0,
  },
  upper: function(e) {
    console.log(e)
  },
  lower: function(e) {
    console.log(e)
  },
  scroll: function(e) {
    console.log(e)
  },
  tap: function(e) {
    for (var i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i < order.length - 1 ? i + 1 : 0],
        })
        break
      }
    }
  },
  tapMove: function(e) {
    this.setData({
      scrollTop: this.data.scrollTop + 20
    })
  }
})


以上内容是否对您有帮助:
二维码
建议反馈
二维码