前言：這章我們使用小程序的scroll-view組件實(shí)現(xiàn)橫向滾動(dòng)和豎向滾動(dòng)跨跨。
GitHub：https://github.com/Ewall1106/miniProgramDemo
1筒饰、豎向滾動(dòng)
首先從簡(jiǎn)單的來背率，豎向滾動(dòng)很簡(jiǎn)單纽帖，只用記住兩點(diǎn)即可：
- 首先得設(shè)置
scroll-y屬性； - 其次咐鹤，一定要給
scroll-view設(shè)置一個(gè)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>
就這樣我們就實(shí)現(xiàn)了豎向滾動(dòng)：
豎向滾動(dòng)
2、橫向滾動(dòng)
橫向滾動(dòng)就有點(diǎn)坑了...
- 首先還是要設(shè)置滾動(dòng)方向?yàn)?code>scroll-x秕脓；
- 然后要給
<scroll-view></scroll-view>設(shè)置white-space為nowrap不換行柒瓣； - 最后需要將容器中包裹的標(biāo)簽的
display屬性設(shè)置為inline-block。
橫向滾動(dòng)
<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>
就這樣我們就實(shí)現(xiàn)了橫向滾動(dòng)的一個(gè)基本效果：
橫向滾動(dòng)
3吠架、其它
（1）當(dāng)然芙贫，關(guān)于scroll-view組件官網(wǎng)還提供了許多其它的屬性和事件方法，大家仔細(xì)去看看：
部分截圖來自小程序官網(wǎng)
參考學(xué)習(xí)：
https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
