携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情
本次系列文章参与八月的更文活动，记录一个微信小程序从零到有的开发过程。本文为本系列第二十一篇：详解scroll-view的应用。
本项目中涉及的一个需求就是关于区域容器内可滚动加载数据，并可执行下拉加载更多的需求。那么就需要用到scroll-view这一组件。在官方文档中，表示scroll-view：是指可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。 关于scroll-view更多的知识，请点击这里查阅其相关文档
需求及UI图示
实现
1.首先放置该容器，使用scroll-view标签组件，并给该组件设置属性scroll-y为true,对该组件绑定下拉滚动事件。以下为这两个属性和方法的官方详解：
代码实现如下：
wxml
<scroll-view bindscrolltolower="scrolltolower" scroll-y>
<!-- 业务代码 -->
</scroll-view>
2.编写下拉滚动事件代码，首先定义一个全局页码的变量，最开始为1，,当一触发该事件，则向后台请求的接口的页码+1，一直到判断为当前的数量=后台的接口返回数量的总数时，页码不再增加，并且提出弹框表示，“已经到底了”告知用户。代码实现如下：
js
data:{
totalCount:0,//接口返回的总数
pageSize:0,当前页面请求到的数量
pageNum:1,当前请求接口的页数
}
//下拉刷新
scrolltolower(){
if(this.data.totalCount<=this.data.pageSize){
Toast('已经到底了');
return;
}
this.data.pageNum+1;
this.data.pageSize = 10*this.data.pageNum; //默认一页为10个
this.getData();//请求接口获取数据
},
