小程序 — scroll-view组件实现滚动

Bertha 。 2022-11-27 07:19 352阅读 0赞

> 前言：这章我们使用小程序的[scroll-view组件][scroll-view]实现横向滚动和竖向滚动。  
> GitHub：[https://github.com/Ewall1106/miniProgramDemo][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>

就这样我们就实现了竖向滚动：

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yODkxMTI3LTUyODE3NWI3MTJlMTU3ZWMuZ2lmP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMzgzL2Zvcm1hdC93ZWJw][]

竖向滚动

### 2、横向滚动 ###

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

*  首先还是要设置滚动方向为`scroll-x`；
 *  然后要给`<scroll-view></scroll-view>`设置`white-space`为`nowrap`不换行；
 *  最后需要将容器中包裹的标签的`display`属性设置为`inline-block`。

![format_png][]

横向滚动

<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>

就这样我们就实现了横向滚动的一个基本效果：

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yODkxMTI3LWYwNDA5YmNiZmUzN2Q0MzIuZ2lmP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMzgzL2Zvcm1hdC93ZWJw][]

横向滚动

### 3、其它 ###

（1）当然，关于[scroll-view组件][scroll-view]官网还提供了许多其它的属性和事件方法，大家仔细去看看：

![format_png 1][]

部分截图来自小程序官网

*参考学习*：  
[https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html][scroll-view]

[scroll-view]: https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
[https_github.com_Ewall1106_miniProgramDemo]: https://github.com/Ewall1106/miniProgramDemo
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yODkxMTI3LTUyODE3NWI3MTJlMTU3ZWMuZ2lmP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMzgzL2Zvcm1hdC93ZWJw]: /images/20221124/2e1669a5dd114467a11d7eb711053bf5.png
[format_png]: /images/20221124/953d0095a8a94a3e947388b5842e8b82.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yODkxMTI3LWYwNDA5YmNiZmUzN2Q0MzIuZ2lmP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMzgzL2Zvcm1hdC93ZWJw]: /images/20221124/965a4152d8254d189d1d17be3c3ec9a9.png
[format_png 1]: /images/20221124/7cb5b9005e38457ab94fbc6695906f90.png