uni-app的＜scroll-view＞＜/scroll-view＞向上滚动判断是否应该刷新

一天学丶

已于 2023-09-18 19:26:25 修改

阅读量1.5k

点赞数

文章标签：前端 uni-app 小程序

于 2022-02-07 14:56:10 首次发布

本文链接：https://blog.csdn.net/libinpeng123/article/details/122808524

版权

本文介绍如何在uni-app中实现根据内容滚动位置判断是否开启下拉刷新。通过监听滚动事件，当滚动高度小于等于1时开启下拉刷新，否则关闭。在`scroll-view`组件中设置相关属性，并在`getNewDate`方法中处理数据更新。

摘要由CSDN通过智能技术生成

uni-app向上滚动根据内容是否滚动到顶部判断是否应该刷新

大致思路

通过判断滚动高度来确定是否应该开启刷新，如果滚动高度大于1(有时滚动到顶部显示的scrollTop为零点几)就关闭下拉刷新，
如果滚动高度小于等于1就开启下拉刷新。

html

// 
<template>
	// 要设置scroll-view高度 从而触发滚动事件
	// scroll-y:开启y轴滚动
	// refresher-enabled:动态判断是否开启自定义下拉刷新
	// refresher-triggered:动态设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
	// @scroll:滚动时触发
	// @refresherrefresh:自定义下拉刷新被触发
	<scroll-view 
		scroll-y="true" 
		:refresher-enabled="isSupport" 
		:refresher-triggered="trigger" 
		@scroll="scrollPage1" 
		@refresherrefresh="getNewDate">
		//内容
	</scroll-view>
</template>

JS

data() {
	return {
	isSupport:true,
	trigger:true,
	TimeOut:null,
	viewScrollTop:null
	}
},
methods:{
	//滚动时触发事件
	scrollPage1(e){
		this.viewScrollTop = e.target.scrollTop;
		if(e.target.scrollTop < 1){
			console.log("开启下拉加载");
			this.isSupport = true
		}else{
			console.log("关闭下拉加载");
			this.isSupport = false
		}
	},
	getNewDate(){
		this.trigger = true
		this.TimeOut = setInterval(()=>{
			console.log("获取数据");
			uni.showToast({
				title:"获取最新数据",
				duration: 1500
			});
			this.trigger = false
			clearInterval(this.TimeOut)
			this.TimeOut = null
		},2000)
	},
}