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

摘要： 前言：這章我們使用小程式的 scroll-view元件 實現橫向滾動和豎向滾動。 GitHub： https://github.com/Ewall1106/miniProgramDemo 1、豎向滾動 首先從簡單的來，豎向滾動很簡單，只用記住兩點即可： 首先得...

前言：這章我們使用小程式的 ofollow,noindex">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元件 官網還提供了許多其它的屬性和事件方法，大家仔細去看看：