小程序滚动视图组件的示例代码

在本章中，我们使用小程序的滚动视图组件来实现水平滚动和垂直滚动。

https://github.com/Ewall1106/miniProgramDemo

1.垂直滚动

首先，从简单的角度来看，垂直滚动很简单，只需要记住两点：

首先设置roll-y属性；其次，一定要为滚动视图设置一个高度；

滚动-查看滚动-y样式=' height: 200px'view class=' green ' style=' width : 100%；高度： 200 px；背景：绿色/view view class=' red ' style=' width : 100%；高度： 200 px；背景：红色/view view class='黄色' style=' width : 100%；高度： 200 px；背景：黄色/view view class=' blue ' style=' width : 100%；高度： 200 px；背景：蓝色/view/scroll-view这样我们就可以实现垂直滚动了：

垂直滚动

2.水平滚动

水平滚动有点坑.

首先，将滚动方向设置为scroll-x；然后将滚动视图/滚动视图的空白设置为nowrap最后，您需要将包装在容器中的标签的display属性设置为inline-block。

横向轧制

滚动-视图滚动-x样式=' width : 100%；white-space : nowrap；'view class=' green ' style=' display : inline-block；宽度： 200 px；高度： 200 px；背景：绿色/view view class=' red ' style=' display : inline-block；宽度： 200 px；高度： 200 px；背景：红色/view view class='黄色' style=' display : inline-block；宽度： 200 px；高度： 200 px；背景：黄色/view view class=' blue ' style=' display : inline-block；宽度： 200 px；高度： 200 px；背景：蓝色/view/scroll-view这样，我们就实现了水平滚动的基本效果：

横向轧制

3.其他人

(1)当然，滚动查看组件的官网还提供了很多其他属性和事件方法。让我们仔细看看：

部分截图来自小程序官网

如何设置滚动视图全屏滚动

根据文档，使用垂直滚动时，需要给出一个固定的高度，并通过WXSS设置高度。

那么当我们想要小程序全屏滚动时，如何设置高度，直接设置高度：100%？似乎不太管用。原因是这个高度没有参照物。过去，我们设定身体的高度。同样，我们发现小程序Page渲染的容器是Page，所以我们先把Page的高度设置为100%，然后再把滚动-视图的高度设置为100%。问题已经解决了。

官方推荐的加载效果

Onload:函数(选项){ wx . show toast({ title : ' loading '，icon :' loading '，duration 3360 10000//loading time })；//wx . HideToast()；隐藏加载}参考研究：https://developers . weixin . QQ.com/mini program/dev/component/scroll-view . html

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。