微信小程序可滚动视图区域 scroll-view

属性名	类型	默认值	说明
scroll-x	boolean	false	允许横向滚动
scroll-y	boolean	false	允许纵向滚动
upper-threshold	number	50	距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold	number	50	距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top	number		设置竖向滚动条位置
scroll-left	number		设置横向滚动条位置
scroll-into-view	string		值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	boolean	false	在设置滚动条位置时使用动画过渡
enable-back-to-top	boolean	false	ios点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
bindscrolltoupper	eventhandle		滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower	eventhandle		滚动到底部/右边，会触发 scrolltolower 事件
bindscroll	eventhandle		滚动时触发，event.detail = {scrollleft, scrolltop, scrollheight, scrollwidth, deltax, deltay}

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

示例代码：

<view class="section">
  <view class="section__title">vertical scroll</view>
  <scroll-view scroll-y style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toview}}" scroll-top="{{scrolltop}}">
    <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="true" 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
    })
  }
})

bug & tip

tip: 请勿在scroll-view中使用textarea、map、canvas、video组件
tip: scroll-into-view的优先级高于scroll-top
tip: 在滚动scroll-view时会阻止页面回弹，所以在scroll-view中滚动，是无法触发onpulldownrefresh
tip: 若要使用下拉刷新，请使用页面的滚动，而不是scroll-view，这样也能通过点击顶部状态栏回到页面顶部