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-spacenowrap不换行;
  • 最后需要将容器中包裹的标签的display属性设置为inline-block
<scroll-view scroll-x style="width: 100%; white-space: nowrap;">
  <view style="display: inline-block; width: 200px; height: 200px;"></view>
  <view style="display: inline-block; width: 200px; height: 200px;"></view>
  <view style="display: inline-block; width: 200px; height: 200px;"></view>
  <view style="display: inline-block; width: 200px; height: 200px;"></view>
</scroll-view>

标签: 小程序,scroll-view

添加新评论