diagnosis_app/views/test/index.vue

<template>
	<view class="tets-wrap">
		<roll-load 
			:total="total"
			@lower="lower"	
			@upper="upper">	
			<template v-slot:cont>
				<block></block>
				<!-- 不加占位区块,循环区块不加载，ljuni -->
				<view class="item" v-for="(item,index) in items" :key="index">
					<p>{{item.id}}</p>
					<text>{{item.name}}---{{index+1}}</text>
				</view>
			</template>		
			<template v-slot:toTop>
				<text>顶部</text>
			</template>							
		</roll-load>
	</view>
</template>

<script>
	import RollLoad from '@/components/RollLoad/index.vue'
	import {deepClone} from '@/libs/index.js';
	
	export default {
		components:{
			RollLoad
		},
		data() {
			return {
				items:[],
				total:40
			}
		},
		created() {
			this.init();
		},
		methods: {
			init(){
				let items=this.getlist();
				this.items=items;
			},
			getlist(){
				let items=[];
				for(let i=0;i<10;i++)
				{
					items.push({
						id:((new Date()).getTime())*i,
						name:'测试'
					})
				}
				return items;
			},
			lower(e){
				let items=deepClone(this.items);
				if(e.status){
					let data=this.getlist();
					this.items=items.concat(data);
				}				
				console.log('滚动到底部------：'+JSON.stringify(e));
			},
			upper(e){
				console.log('滚动到底部顶部:-----'+JSON.stringify(e));
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tets-wrap{
		padding: 20upx;
		.item{
			border: 1px solid #ccc;
			height: 300upx;
			margin-top: 20upx;
		}
	}
</style>