小程序-uni-app：scroll-view/区域滚动、下拉刷新、上拉加载更多

一、简介

开发环境：小程序、uniapp + vue3 + ts

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

正常：

下拉刷新：

 

上拉加载：

二、实现

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"，事件：自定义下拉刷新被中止

三、过程记录

3.1、scroll-view必须设置高度

需要注意的是scroll-view必须设置高度，不设置的话没效果，但不要设置100%，除非父元素写了高度。

3.2、滚动到指定位置，滚动到底部

:scroll-top="scrollTop"

scrollTop可以设置滚动的位置，值设置的特别大即可滚动到底部

3.3、设置锚点

小程序-uni-app：实现锚点连接/锚点跳转(uni.pageScrollTo、scroll-into-view)_uniapp锚点链接_snowball_li的博客-CSDN博客

3.4、动态设置高度

:style="'height: calc(100vh - '+ bottomHeight +');background:#ededed;'"

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

五、参考文档

微信小程序 在bindscroll事件中监听scroll-view滚动到底_跟 耿瑞 卷出一片天的博客-CSDN博客

uniapp如何实现锚点定位?_uniapp 锚点_辰枫Sir.的博客-CSDN博客

scroll-view | 微信开放文档