前言:这章我们使用小程序的滚动视图组件实现横向滚动和竖向滚动。
GitHub: https://github.com/Ewall1106/miniProgramDemo
首先从简单的来,竖向滚动很简单,只用记住两点即可:
首先得设置<代码> scroll-y 属性;其次,一定要给<代码>滚动视图> 高高度度;
就这样我们就实现了竖向滚动:
竖向滚动
横向滚动就有点坑了…
-
<李>首先还是要设置滚动方向为<代码> scroll-x>
<李>然后要给<代码> & lt; scroll-view> & lt;/scroll-view> 设置<代码>空白为<代码> nowrap }不换行;李
<李>最后需要将容器中包裹的标签的<代码>显示> inline-block>
横向滚动
就这样我们就实现了横向滚动的一个基本效果:
横向滚动
(1)当然,关于滚动视图组件官网还提供了许多其它的属性和事件方法,大家仔细去看看:
部分截图来自小程序官网
<>强如何设置滚动视图满屏滚动
文档中说到:使用竖向滚动时,需要给一个固定高度,通过wxs设置高度。
那么我们想让小程序满屏滚动该如何设置高度呢,直接设置高度:100% & # 63;好像不是很好,用原因是因为这个高度没有参照物,以前我们是设置体的高度,类似,我们这里发现小程序页面渲染出来的容器是页面,那我们就先设置页面的高度100%,再设置滚动视图高度100%,问题得到解决。
官方推荐的加载效果
参考学习: https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
