payy-app/components/RollLoad/index.vue

<template>
	<view class="roll-load-wrap">
		<scroll-view class="scroll-view" :style=styles :scroll-top="scrollTop" :scroll-with-animation="true"
			:scroll-y="true" @scroll="scroll" @scrolltoupper="upper" @scrolltolower="lower">
			<slot name="cont">
				<text></text>
			</slot>
			<view class="tip" v-if="maxPageNumber===pageNumber">
				<text>暂无更多数据!</text>
			</view>
		</scroll-view>
		<view class="toTop" v-if="topBt.show" @tap="goTop"  :style="topBt.style">
			<slot name="toTop">
				<text>去顶部</text>
			</slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "roll-load",
		props: {
			total: {
				type: [Number, String],
				default: 0
			},
			size: {
				type: [Number, String],
				default: 10
			},
			topBt: {
				type: [Object],
				default: () => {
					return {
						show: true,
						style:''
					}
				}
			},
			styles: {
				type: String,
				default: ""
			}
		},
		computed: {
			maxPageNumber() {
				let total = this.total;
				let pageSize = this.size;
				return Math.ceil((total / pageSize));
			}
		},
		data: () => {
			return {
				pageNumber: 1,
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		methods: {
			init() {
				this.pageNumber = 1;
				this.scrollTop = 0;
				this.old = {
					scrollTop: 0
				}
			},
			upper: function(e) {
				this.$emit('upper', {
					pageNumber: this.pageNumber,
					pageSize: this.size
				})
			},
			lower: function(e) {
				let pageNumber = this.pageNumber;
				let maxPageNumber = this.maxPageNumber;
				if (pageNumber < maxPageNumber) {
					this.pageNumber++;
					this.$emit('lower', {
						pageNumber: this.pageNumber,
						pageSize: this.size,
						status: true
					})
				} else {
					uni.showToast({
						icon:'none',
						title: "我也是有底线的！",
						duration: 1800
					})
					this.$emit('lower', {
						pageNumber: this.pageNumber,
						pageSize: this.size,
						status: false
					})
				}
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop;
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(() => {
					this.scrollTop = 0
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.roll-load-wrap {
		.scroll-view {
			height: 100vh;
		}
		.toTop {
			width: 100upx;
			height: 100upx;
			border-radius: 50%;
			background-color: rgba(51, 132, 255, 0.8);
			color: #fff;
			text-align: center;
			line-height: 100upx;
			position: fixed;
			right: 20upx;
			top: 50%;
			transform: translateY(-50%);
			box-shadow: 0 0 2upx rgba(0, 0, 0, 0.5);
			z-index: 9999;
		}
		.tip{
			height: 100upx;
			text-align: center;
			line-height: 100upx;
		}
	}
</style>