微信小程序 scroll-view详解

官方文档

注意：本文全部代码实例皆为竖直方向滚动

官方的代码实例(小小改动，自己增加了css）

画重点：使用竖向滚动时，需要给<scroll-view>一个固定高度，通过 WXSS 设置 height,注意height的单位必须固定为px哦

有几个必须要知道的值的含义：

id: 注意id不能用数字,不然会一直报错烦死人。

scroll-view:  就是默认显示的视图。

scroll-into-view: 的值就是你想滚动到的那个元素的id。

scroll-y: 设置滚动为竖直方向, scroll-x:设置滚动为水平方向

scroll-top: MDN的解释比官方的文档清楚。

index.wxml

<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>

index.wxss

.scroll-view-item{
  width:100%;
  height: 100px;
}
.bc_green{
  background: green;
}
.bc_red{
  background: red;
}
.bc_yellow{
  background: yellow;
}
.bc_blue{
  background: blue;
}

index.js

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
    })
  }
})

最后通过按钮来控制滚动。

来一张截图：

这里视图图窗口的高度是固定的，但是设备经常会有变化啊，自适应滚动视图详见下一篇博文。