scroll-view

1、竖向滚动

首先从简单的来，竖向滚动很简单，只用记住两点即可：

• 首先得设置scroll-y属性；
• 其次，一定要给scroll-view设置一个height高度；

  "height: 200px;">
    class="green" style="width: 100%; height: 200px; background: green;">
    class="red" style="width: 100%; height: 200px; background: red;">
    class="yellow" style="width: 100%; height: 200px; background: yellow;">
    class="blue" style="width: 100%; height: 200px; background: blue;">
  

  2、横向滚动

  横向滚动就有点坑了...

  • 首先还是要设置滚动方向为scroll-x；

  • 然后要给设置white-space为nowrap不换行；

  • 最后需要将容器中包裹的标签的display属性设置为inline-block。

  • "width: 100%; white-space: nowrap;">
      class="green" style="display: inline-block; width: 200px; height: 200px; background: green;">
      class="red" style="display: inline-block; width: 200px; height: 200px; background: red;">
      class="yellow" style="display: inline-block; width: 200px; height: 200px; background: yellow;">
      class="blue" style="display: inline-block; width: 200px; height: 200px; background: blue;">
    

     

  具体参数看官网    https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html