小程序scroll-view组件实现滚动的示例代码

前端之家收集整理的这篇文章主要介绍了小程序scroll-view组件实现滚动的示例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言:这章我们使用小程序 实现横向滚动和竖向滚动。

GitHub:

1、竖向滚动

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

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

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

2、横向滚动

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

  • 首先还是要设置滚动方向为 scroll-x
  • 然后要给 设置 white-spacenowrap 不换行;
  • 最后需要将容器中包裹的标签display 属性设置为 inline-block

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

3、其它

(1)当然,关于官网还提供了许多其它的属性和事件方法,大家仔细去看看:

如何设置scroll-view满屏滚动

文档中说到:使用竖向滚动时,需要给一个固定高度,通过 WXSS 设置 height。

那么我们想让小程序满屏滚动该如何设置高度呢,直接设置height:100%?好像不是很好用,原因是因为这个高度没有参照物,以前我们是设置body的高度,类似,我们这里发现小程序页面渲染出来的容器是Page,那我们就先设置Page的高度100%,再设置scroll-view高度100%,问题得到解决。

官方推荐的loading效果

参考学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章