diagnosis_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>	
		</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({
						title:"没有数据了"
					})
					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;
		}
	}
</style>