uniapp学习之旅上拉加载

上拉加载

首先在页面pages.json中配置页面距离底部的距离

{
			"path": "pages/list/list",
			"style":{
				"enablePullDownRefresh":true,
				"onReachBottomDistance":200
				
			}
		},

然后在script中编写响应事件

<template>
	<view>
		<view >列表页</view>
		<view class="box-item" v-for="(item,index) in list" :key=index>{{item}}</view>
	
	</view>
	
</template>

<script>
	export default{
		data(){
			return{
				list:['a','b','c','d','e','f','b','c','d','e']
			}
		},
		onPullDownRefresh() {
			console.log("已触发")
			setTimeout(()=>{
				
				this.list=[1,2,3,4,5,6,7]
				uni.stopPullDownRefresh()
			},2000)//设置延迟处理
		},
		methods:{
			pulldown(){
				uni.startPullDownRefresh()
			}
		},
		onReachBottom() {//页面触底事件
			console.log("页面触底了")
			this.list=[...this.list,...[1,2,3,4,5,6]]
		}
	}
</script>

<style>
	.box-item{
		height: 200rpx;
		line-height: 100rpx;
	}
</style>

效果展示：