Scroll View

可滚动视图区域。

属性

支持通用属性

属性名 类型 默认值 描述 平台支持
scroll-x Boolean false 是否允许横向滚动 all
scroll-y Boolean false 是否允许纵向滚动 all
upper-threshold Number 50 距顶部/左边多少距离时（px）触发 u?,w,a
lower-threshold Number 50 距底部/右边多少距离时（px）触发 u?,w,a
scroll-top Number 竖向滚动条位置 u?,w,a
scroll-left Number 横向滚动条位置 u?,w,a
scroll-into-view String 值为某个子元素的 id，滚动到该元素，元素顶部对齐滚动区域顶部 u?,w,a
scroll-with-animation Boolean false 是否在设置滚动条位置时使用动画过渡 u?,w,a

事件

支持通用事件

事件名 描述 平台支持
onscrolltoupper 滚动到顶部/左边时触发 u?,w,a
onscrolltolower 滚动到底部/右边时触发 u?,w,a
onscroll 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} all

示例

<view class="section">
  <view class="section__title">vertical scroll</view>
  <scroll-view scroll-y style="height: 200px;" onscrolltoupper="upper" onscrolltolower="lower" onscroll="scroll" scroll-into-view="" scroll-top="">
    <view id="green" class="scroll-view-item bc_green"></view>
    <view id="red"  class="scroll-view-item bc_red"></view>
    <view id="yellow" class="scroll-view-item bc_yellow"></view>
    <view id="blue" class="scroll-view-item bc_blue"></view>
  </scroll-view>

  <view class="btn-area">
    <button size="mini" bindtap="tap">click me to scroll into view </button>
    <button size="mini" bindtap="tapMove">click me to scroll</button>
  </view>
</view>
<view class="section section_gap">
  <view class="section__title">horizontal scroll</view>
  <scroll-view class="scroll-view_H" scroll-x style="width: 100%">
    <view id="green" class="scroll-view-item_H bc_green"></view>
    <view id="red"  class="scroll-view-item_H bc_red"></view>
    <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
    <view id="blue" class="scroll-view-item_H bc_blue"></view>
  </scroll-view>
</view>

var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
  data: {
    toView: 'red',
    scrollTop: 100
  },
  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 + 1]
        })
        break
      }
    }
  },
  tapMove: function(e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})

Tips

  • scroll-into-view 的优先级高于 scroll-top
  • 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh

results matching ""

    No results matching ""