微信小程序实现上拉加载下拉刷新

使用场景

由于微信小程序本身的限制，使用浏览器中window那一套操作实现监测上下拉大概率是不太行的（微信魔改的那一套渲染架构和沙盒机制）。因此需要使用微信提供的组件和api来实现，本文介绍使用Taro总的说来还是比较简单的。

组件的选用

Taro提供了四种经过封装的视图组件：CoverView, MovableView, ScrollView, View。因为要做的是上拉下拉的检测，查看官方文档，发现ScrollView中的onRefresherRefresh和onScrollToLower属性支持下拉和上拉事件回调的自定义，因此选用该组件实现功能

实现

虽然ScrollView组件名字带个Scroll，但是它其实是默认设置不允许横向纵向滚动的，因此首先需要设置scrollY属性为true。

<ScrollView
	scrollY
>
	{/* ... */}
</ScrollView>

这里有一个坑就是onScrollToLower属性在右滑的时候也会触发，所以一定不能设置scrollX为true！

使用自定义下拉刷新需要设置refresherEnabled为true，因此也要在代码中传递该props。

<ScrollView
	scrollY
	refresherEnabled
>
	{/* ... */}
</ScrollView>

然后添加onRefresherRefresh属性，当下拉的时候，自定义刷新事件便会触发

<ScrollView
	scrollY
	refresherEnabled
	onRefresherRefresh={this.handleRefresherRefresh}
>
	{/* ... */}
</ScrollView>

上拉加载更为简单，直接添加onScrollToLower属性即可

<ScrollView
	scrollY
	refresherEnabled
	onRefresherRefresh={this.handleRefresherRefresh}
	onScrollToLower={this.handleLoadMore}
>
	{/* ... */}
</ScrollView>

如果想实现离底部一定距离就触发上拉的回调函数，可以添加lowerThreshold属性，值为距离底部/右边的距离（单位px）。

如果不方便使用onScrollToLower事件，可以使用Taro UI中的LoadMore组件替代，自定义程度更高，相对的实现难度也会更高。