小程式 — scroll-view元件實作滾動

前言：這章我們使用小程式的scroll-view元件實作橫向滾動和豎向滾動。

GitHub：https://github.com/Ewall1106/miniProgramDemo

1、豎向滾動

首先從簡單的來，豎向滾動很簡單，隻用記住兩點即可：

• 首先得設定

  scroll-y

  屬性；
• 其次，一定要給

  scroll-view

  設定一個

  height

  高度；

<scroll-view scroll-y style="height: 200px;">
  <view class="green" style="width: 100%; height: 200px; background: green;"></view>
  <view class="red" style="width: 100%; height: 200px; background: red;"></view>
  <view class="yellow" style="width: 100%; height: 200px; background: yellow;"></view>
  <view class="blue" style="width: 100%; height: 200px; background: blue;"></view>
</scroll-view>           

複制

就這樣我們就實作了豎向滾動：

豎向滾動

2、橫向滾動

橫向滾動就有點坑了...

• 首先還是要設定滾動方向為

  scroll-x

  ；
• 然後要給

  <scroll-view></scroll-view>

  設定

  white-space

  為

  nowrap

  不換行；
• 最後需要将容器中包裹的标簽的

  display

  屬性設定為

  inline-block

  。

橫向滾動

<scroll-view scroll-x style="width: 100%; white-space: nowrap;">
  <view class="green" style="display: inline-block; width: 200px; height: 200px; background: green;"></view>
  <view class="red" style="display: inline-block; width: 200px; height: 200px; background: red;"></view>
  <view class="yellow" style="display: inline-block; width: 200px; height: 200px; background: yellow;"></view>
  <view class="blue" style="display: inline-block; width: 200px; height: 200px; background: blue;"></view>
</scroll-view>           

複制

就這樣我們就實作了橫向滾動的一個基本效果：

橫向滾動

3、其它

（1）當然，關于scroll-view元件官網還提供了許多其它的屬性和事件方法，大家仔細去看看：

部分截圖來自小程式官網

參考學習：

https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html