scroll-view封裝刷新加载组件

<template>
	<view class="container">
		<scroll-view scroll-with-animation class="scroll" :class="class1" :scroll-y="scrollY" :scroll-top="scrollTop" 
			:refresher-enabled="isrefresh" :refresher-threshold="refresherThreshold" 
			:refresher-triggered="triggered" @refresherrefresh="onRefresh" :refresher-default-style="rstyle"
			:refresher-background="rsback"
			@scrolltolower="scrolltolower" @scrolltoupper="scrolltoupper" @scroll="scroll"
			>
			<slot></slot>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "container",
		props: {
			scrollTop: {
				type: Number,
				default: 0
			},
			isrefresh: {
				type: Boolean,
				default: false
			},
			refresherThreshold:{
				type: Number,
				default: 45
			},
			isend:{
				type: Boolean,
				default: false
			},
			scrollY:{
				type: Boolean,
				default: true
			},
			rstyle:{
				type:String,
				default:'black'
			},
			rsback:{
				type:String,
				default:'#ffffff'
			},
			class1:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				Isfreshing:false,
				triggered:false,
			}
		},
		methods: {
			onRefresh(data) {   //刷新
			    if (this.Isfreshing) return;  
				this.Isfreshing = true;  
				if (!this.triggered)//保证刷新状态下，triggered为true  
				this.triggered = true;
				this.$emit("onRefresh", data)
				setTimeout(() => {
			        this.triggered = false; 
			        this.Isfreshing = false;
					this.onRestore(); //触发onRestore，关闭刷新图标 
			    }, 1200)  
			},
			onRestore(data) {   // 需要重置
				this.$emit("onRestore", data)
			},
			scrolltolower(data) {  //到底
				this.$emit("scrolltolower", data)
			},
			scrolltoupper(data){  //到顶
				this.$emit("scrolltoupper", data)
			},
			scroll(data) {  //滚动
				this.$emit("scroll", data)
			},
		}
	}
</script>

<style>
.container {
position: relative;
display: flex;
width: 100%;
flex-shrink: 1;
flex-grow: 1;
z-index: 1;
.scroll {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
</style>

使用组件

<container @scroll="scroll" @scrolltolower="loadMore" @onRestore="refresh" :isrefresh="true" :scroll-y="true" rsback="#ffffff"></container>