uni-app 微信小程序如果做上拉分页效果

在对多条数据的时候如何去做翻页的效果呢，主要是利用到生命周期中的onReachBottom，当下拉到底的时候就会触发这个生命周期。接口中对于传递给后台的页码就可以动态的去传参就行了，举例：这是我的接口方法

		data() {
			return {
				UserFoot: [],
				page:1, // 页码
			}
		},
		methods: {
			//用户足迹
			getUserFoot(pages) {
				let _this = this
				
				// showToast('加载中...')
				uni.getStorage({
					key:'token',
					success:res => {
						uni.request({
							url: _this.apiServer + 'api/user/UserFoot', // 这是我的接口地址
							header: {
								"token": res.data, // token
							},
							data:{
								page:_this.page, // 动态传参的页码
							},
							method:'POST',
							success: (res) => {
								isCode( res.data.code )
								_this.UserFoot.push(... res.data.data.list); // 有数据就push到数组中
								if(res.data.data.list.length > 0){  // 判断下一页是否有数据，有数据再累加页码
									_this.page++;  // 页码累加
								}
							}
						})
					}
				})
				// hideToast()
				
			},
		},
		onLoad() {
		    // 调用接口
			this.getUserFoot()
		},
		//监听页面下拉事件
		onPullDownRefresh() {
			console.log('下拉')
			this.page = 1  // 下拉刷新的时候把页码恢复为第一页
			this.UserFoot = [] // 把数组的里面数据先清空
		    this.getUserFoot()
		},
		//监听页面刷到底 ，触底以后调用接口
		onReachBottom() {
		   // 触底
		  console.log('触底')
		  this.getUserFoot()
		}
	

html代码 加了一个数据为空的时候显示的内容，

<template>
	<view class="browse">
		<--如果数组里面没有数据就显示这个-->
		<view v-if="!UserFoot.length" style="padding-top: 50rpx;text-align: center;">
			暂无记录
		</view>
		
		<view class="ul" v-else>
			<view class="li" v-for="(item,index) in UserFoot" :key="index">
				<image :src="item.cover" ></image>
				<view class="r">
					<view class="name">{{item.name}}</view>
					<view class="info">{{item.desc}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

写的不好请多指教，如果有问题可以私聊我。谢谢