微信小程序之scroll-view

scroll-view
可滚动视图区域。

使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。
实例代码如下：

<view class="section">
  <view class="section__title">垂直滑动</view>
  <scroll-view scroll-y="true" bindscrolltolower="lower" bindscrolltoupper="upper" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
    <view style="background:red;width: 200px; height: 300px"></view>
    <view style="background:green;width: 200px; height: 300px"></view>
    <view style="background:blue;width: 200px; height: 300px"></view>
    <view style="background:yellow;width: 200px; height: 300px"></view>
  </scroll-view>
  <view class="section__title">水平滑动</view>
  <scroll-view scroll-x="true" style="white-space: nowrap; display:flex ">
    <view style="background:red;width: 200px; height: 200px; display:inline-block "></view>
    <view style="background:green;width: 200px; height: 200px;display:inline-block "></view>
    <view style="background:blue;width: 200px; height: 200px;display:inline-block "></view>
    <view style="background:yellow;width: 200px; height: 200px;display:inline-block "></view>
  </scroll-view>
</view>
   
   
1

效果图：

只用scollview需要注意一下几点：

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