uniapp上拉加载下拉刷新

<template>
	<view class="content">
		<scroll-view scroll-with-animation refresher-default-style="none" :refresher-enabled="true"
			:refresher-triggered="triggered" refresher-background="#fff"
			style="height: 90vh;width: 750rpx;border: 1px solid red;" :scroll-top="scrollTop" scroll-y="true"
			@refresherrefresh="onRefresh" @scrolltolower="scrolltolower">
			<slot name="topLoading">
				<view class="topBox">
					<view class="loader">
						<view v-for=" ( v, i ) in 10" :key="v"
							:style="{ transform: 'rotate(' + (i * 36) + 'deg)', animationDelay: v == 10 ? 1 + 's' : '0.' + v + 's' }">
						</view>
					</view>
					<view style="margin-left: 35rpx;">
						{{ topTis }}
					</view>
				</view>
			</slot>
			<view v-for="v in 50 " :key="v">A</view>
			<slot name="bottomLoading">
				<div class="bottomLoading">
					{{ loadOver ? (isScrolltolower ? '努力加载中....' : '上拉加载更多') : '人家是有底线的' }}
				</div>
			</slot>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data () {
		return {
			triggered: false,
			topTis: '松手刷新',
			isScrolltolower: false,
			loadOver: true,
		}
	},
	onLoad () {

	},
	watch: {
	},
	methods: {
		onRefresh () {
			console.log(123, 'val')
			this.isScrolltolower = false
			this.loadOver = true
			this.topTis = '努力加载中'
			//做一个判断，判断triggered 是否为true
			if (!this.triggered) {
				this.triggered = true
				setTimeout(e => {
					this.triggered = false
					this.topTis = '松手刷新'
				}, 1500)
			}
		},
		scrolltolower (e) {
			if (this.isScrolltolower) return
			this.isScrolltolower = true
		}
	}

}
</script>

<style lang="less" scoped>
.topBox {
	margin-top: -80rpx;
	width: 100%;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}


.loader {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	position: relative;
	margin-top: -25rpx;
}

.loader view {
	width: 2px;
	height: 6px;
	background-color: gray;
	transform-origin: 50% 150%;
	position: absolute;
	animation: color-change 1s infinite;
}

@keyframes color-change {
	from {
		background-color: gray;
	}

	to {
		background-color: white;
	}
}

.bottomLoading {
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>