assess-app/components/en-scroll/en-scroll.vue

<template>
	<view>
		<scroll-view class="main" :style="{height:`calc(100vh - ${$tools.topHeight()+navHeight+tabHeight}px)`}"
			scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="45"
			refresher-background="lightgreen" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
			@refresherrestore="onRestore" @refresherabort="onAbort" @scrolltolower="onScrolltolower">
			<!-- 自定义样式时设置 refresher-default-style="none" -->
			<view slot="refresher">刷新样式</view>
			<slot></slot>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			navHeight: {
				type: Number,
				default: 0
			},
			is_tabHeight: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				triggered: false,
				// 底部tab高度
				tabHeight: uni.getStorageSync('tab_height'),
			}
		},
		created() {
			this.tabHeight = this.is_tabHeight ? this.tabHeight : 0
		},
		onLoad() {
			// this._freshing = false;
			// setTimeout(() => {
			// 	this.triggered = true;
			// }, 1000)
		},
		methods: {
			// 自定义下拉刷新控件被下拉
			onPulling(e) {
				if (e.detail.deltaY < 0) {
					return
				}
				this.triggered = true
			},
			// 触发下拉刷新
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				this.$emit('onRefresh')
			},
			// 数据加载结束
			onEndPulling() {
				this.triggered = false;
				this._freshing = false;
			},
			// 重置下拉
			onRestore() {
				this.triggered = 'restore';
			},
			// 下拉被中止
			onAbort() {
				this.triggered = false;
				this._freshing = false;
			},
			// 滚动到底部
			onScrolltolower() {
				this.$emit('onScrollBottom')
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>