uni-app中页面的上拉加载与下拉刷新（中）

前面讲了基础的实现思路，这里继续补充一下具体的代码

滚动区域的具体实现代码

ini 复制代码

const sysInfo = uni.getSystemInfoSync()
this.window_height = sysInfo.windowHeight //窗口的可视高度

这里通过uni-app提供的获取设备信息的api拿到了整个可视区域的高度赋值给变量window_height

ruby 复制代码

<!-- 内容区域 -->
<view class="sec1">
	<scroll-view 
	:style="'height:'+ (window_height-120) +'px'" 
	scroll-y="true" 
	@scrolltolower="handleScrollToLower">
	
		<view><uni-load-more :status="loading"></uni-load-more></view>
	</scroll-view>
</view>

实现区域滚动用的是uni-app提供的scroll-view组件

滚动区域的高度是通过 (window_height-120) +'px' 动态计算得到的，因为getSystemInfoSync获取到的数据返回的默认单位是px，所以这里后面使用的单位是px。而上面高度中的 120就是滚动区域上方一个固定的高度，不同的页面上方的高度可能会有所不同，视具体页面而定

请注意，虽然在小程序中为了自适应，很多单位都是用 rpx。但是，这种区域滚动上方占用高度的模块的高度还是建议使用 px的。这样的好处是，在任何设备上，这个高度都不会变。这样用可视高度减去这个具体的数值就是非常准确的滚动区域需要的高度

滚动区域设置完成以后，剩下的就是需要填充业务数据了。每一个项目中都会有分页，写的次数多了就会整理出一个固定的模板，这样以后哪里需要分页的时候，直接去拷贝现成的分页模板即可。提高开发效率，减少出错率。

分页拉取数据的业务的分析

分页加载数据的情况会有两种。

情况一上拉需要加载更多数据的时候，此时需要拉取下一页的内容。

情况二筛选条件改变或者是触发下拉刷新操作的时候，此时需要清空已加载的数据，重新从第一页拉取符合条件得数据。这两种情况很多前端同学都是分开在两个方法中实现的。一个是刷新，一个是加载更多。但是这样写的问题是，两个方法中的代码逻辑非常的相似。我们尝试在一个方法中去实现，只是通过不同的参数去控制着是加载更多数据还是初始化分页数据。

分页拉取数据的业务代码

1 data中定义分页需要用到的一些变量

vbnet 复制代码

loading:'',   // more/loading/noMore
query_params:{
    pageNo:1,
    pageSize:3,
    typeOne:'',
    typeTwo:'',
    provinceId:'',
    cityId:'',
    areaId:'',
    rank:1,
},
list_data:[]

后续代码有详细的的解释