前言:这章我们使用小程序的 实现横向滚动和竖向滚动。
1、竖向滚动
首先从简单的来,竖向滚动很简单,只用记住两点即可:
首先得设置 scroll-y
属性; 其次,一定要给 scroll-view
设置一个 height
高度;
就这样我们就实现了竖向滚动:
2、横向滚动
横向滚动就有点坑了...
- 首先还是要设置滚动方向为
scroll-x
; - 然后要给
设置white-space
为nowrap
不换行; - 最后需要将容器中包裹的标签的
display
属性设置为inline-block
。
就这样我们就实现了横向滚动的一个基本效果:
3、其它
(1)当然,关于官网还提供了许多其它的属性和事件方法,大家仔细去看看:
如何设置scroll-view满屏滚动
文档中说到:使用竖向滚动时,需要给一个固定高度,通过 WXSS 设置 height。
那么我们想让小程序满屏滚动该如何设置高度呢,直接设置height:100%?好像不是很好用,原因是因为这个高度没有参照物,以前我们是设置body的高度,类似,我们这里发现小程序页面渲染出来的容器是Page,那我们就先设置Page的高度100%,再设置scroll-view高度100%,问题得到解决。
官方推荐的loading效果