【干货#014】小程序"页面滚动"与"滚动视图区域"区别

发现很多同学在开发小程序时经常搞混小程序的“页面滚动”与“滚动视图区域”的区别。下面我们进行分别解释,把它们彻底搞清:


页面滚动

小程序页面(注意这里说的页面指的是注册的Page,而不是视图容器view),默认就具有滚动(上拉)功能,滚动时触发PageScroll事件;在页面滚动触底时,会触发ReachBottom事件;页面下拉时,触发PullDownRefresh事件,通常用于页面刷新。这三个事件的处理函数都需在注册页面时定义。官方文档如下所示:

【干货#014】小程序"页面滚动"与"滚动视图区域"区别


滚动视图区域

滚动视图区域(scroll-view)是页面视图容器组件的一种,意思“滚动视图区域”就是一种可以在页面Page内部一个区域内可以滚动的组件。如微信官方示例程序所示,图中绿色和蓝色区域是scroll-view组件,在这个区域内可以上下滚动,同时整个页面也是可以滚动的,这是两种完全不一样且互不冲突的滚动。

【干货#014】小程序"页面滚动"与"滚动视图区域"区别

不知道讲清楚了没有?还有不清楚区别的同学可以到微信小程序官方示例程序,扫下面小程序码体验一下。

【干货#014】小程序"页面滚动"与"滚动视图区域"区别

注意事项

1. 在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动,是无法触发 onPullDownRefresh

2.小程序页面点击顶部状态栏可以回到页面顶部,当使用scroll-view时将不具备该功能。


更多常见错误,可查看:

解决 Page[pages/XXX/XXX] not found错误

解决"Failed to load image"错误


更多实战干货,可查看:

实战知晓云发送模板消息

30分钟实战知晓云内容发布小程序

实战知晓云分页显示

小程序页面滚动实现广告条隐藏

细解小程序自适应单位rpx

小程序实现地址自动解析和导航


关注晓程序干货店,分享小程序开发干货知识

【干货#014】小程序"页面滚动"与"滚动视图区域"区别