小程序：区域滚动、下拉刷新、上拉加载更多

一、简介

开发环境：小程序、uniapp

实现功能：列表页面实现，区域滚动、下拉刷新、上拉加载更多，效果如图：

正常：

下拉刷新：

 

上拉加载：

 二、实现

2.1、代码

<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower" refresher-enabled="true" @refresherrefresh="refresher" :refresher-triggered="triggered" @refresherrestore="onRestore" @refresherabort="onAbort" v-if = "patList.length > 0">
	<view class="itemList" @click="toDetail(item.caseId,item.identifier)" v-for="(item,index) in patList" :key="index">
		<view class="title">
			<span class="name">翁美玲</span>
			<span class="time">2022-07-15</span>
		</view>
	</view>
	<view class="loading">
		<view class="tips" v-if="loadings === '0'">这是我的底线了~</view>
		<view class="tips" v-else-if="loadings === '1'">上拉加载更多...</view>
		<view class="imgs" v-else-if="loadings === '2'">
			<image src="load.png" mode=""></image>
			<text>加载中...</text>
		</view>
	</view>
</scroll-view>

-------------------------------------------------
lower(){
	console.log('滚动到底部')
	this.page ++
	this.getList()
},
refresher(){
	console.log('下拉刷新',this._freshing,this.triggered)
	if (this._freshing) return;
	this._freshing = true;
	this.triggered = true
	this.page = 1
	this.getList()
    //getList方法执行结束后恢复下边两个状态
	//this.triggered = false;
	//this._freshing = false;
},

2.2、 解析：

2.2.1、<scroll-view></scroll-view>，定义需要滚动的区域

2.2.2、:scroll-y，允许纵向滚动

2.2.3、@scrolltolower="lower"，事件：滚动到底部/右边时触发，可以调用加载下一页数据了

2.2.4、:refresher-enabled="true"，属性：开启自定义下拉刷新

2.2.5、@refresherrefresh="refresher"，事件：自定义下拉刷新被触发，可以重新调用接口了

2.2.6、:refresher-triggered="triggered"，属性：设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发

2.2.7、@refresherrestore="onRestore"，事件：自定义下拉刷新被复位

2.2.8、@refresherabort="onAbort"，事件：自定义下拉刷新被中止

三、虽然很简单，但是我觉得每个知识点都应该被记录。欢迎交流指正，关注我，一起学习。

四、参考文档：

scroll-view | 微信开放文档