微信小程序 组件scroll-view实现横向滚动和垂直滚动

1.横向滚动

给scroll-view标签设置 scroll-x="true"属性，scroll-view 才可以实现水平滚动，默认 scroll-x=“false”。同时还要设置两个重要的属性：
1).必须给scroll-view标签添加white-space:nowrap属性
2).给子元素添加display:inline-block属性

<view>横向滚动</view>
<scroll-view scroll-x='true' id='theId' style='width:100%;height:200rpx;display:flex;white-space: nowrap;'>
 <view id="red" style="background: red; width: 200px; height: 100%;display: inline-block">1</view>
  <view id="green" style="background: green; width: 200px; height: 100%;display: inline-block">2</view>
  <view id="blue" style="background: blue; width: 200px; height: 100%;display: inline-block">3</view>
  <view id="yellow" style="background: yellow; width: 200px; height: 100%;display: inline-block">4</view>
</scroll-view>

2.垂直滚动

设置 scroll-y=“true”，scroll-view 才可以实现垂直滚动，默认 scrolly=“false”，还需要设置高度

<scroll-view scroll-y='true' style='width:100%;height:400rpx;display:flex;'>
 <view id="red" style="background: red; width: 100%; height: 100%;display: inline-block">1</view>
  <view id="green" style="background: green; width: 100%; height: 100%;display: inline-block">2</view>
  <view id="blue" style="background: blue; width: 100%; height: 100%;display: inline-block">3</view>
  <view id="yellow" style="background: yellow; width: 100%; height: 100%;display: inline-block">4</view>
</scroll-view>