小程序 — scroll-view组件实现滚动
标签：
JavaScript
前言：这章我们使用小程序的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组件官网还提供了许多其它的属性和事件方法，大家仔细去看看：
部分截图来自小程序官网
作者：Ewall_
链接：https://www.jianshu.com/p/0599cf0c44ce
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦