小程序 — 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