uniapp如何实现上拉加载,下拉刷新,分页加载,自动加载,无限滚动

今天在uniapp插件市场里找到一个滚动加载的插件，用起来还不错，插件地址是：https://ext.dcloud.net.cn/plugin?id=4260

插件导入你自己的项目即可使用，下面是uniapp+thinkphp的示例代码：

需要注意的是：callback中的total传的是数据总条数；以及刷新事件时需要重置list；

<view class="page-wrap u-skeleton">
    <data-list class="data-list listbox" ref="list" @load="getList" @refresh="handleRefresh">
        <view class="list" v-for="(item,index) in list" :key="index"></view>
    </data-list>
</view>

<style scoped lang="scss">
.page-wrap {
	height: 100%;
	.test-view {
		height: 300rpx;
	}
	.navbar-content {
		width: 100%;
		display: flex;
		padding: 30rpx;
		align-items: center;
		justify-content: space-between;
	}
	.u-icon {
		margin-left: 30rpx;
	}
	.item-wrap {
		display: flex;
		margin: 10rpx;
		padding: 30rpx;
		align-items: center;
		border-radius: 16rpx;
		box-shadow: 0rpx 8rpx 16rpx rgba(0, 0, 0, 0.11);
		.avatar {
			width: 150rpx;
			height: 150rpx;
			margin-right: 30rpx;
			border-radius: 16rpx;
			background-color: #c0c0c0;
		}
		.item {
			width: 100rpx;
			height: 30rpx;
			margin-bottom: 10rpx;
			border-radius: 16rpx;
			background-color: #c8c7cc;
		}
	}
}
</style>

data() {
			return {

				list:[],
				total: 0,

				/*加载插件配置*/
				showEmpty:true,
			}
		},



getList(data,callback){
				let that = this;
				console.log('data:',data);
				uni.request({
					url: that.api_url+'api/life.user/inviteenroll', //仅为示例，并非真实接口地址。
					header: {
						// 'X-Auth-Token': 123456, //授权token
						'accept-language': 'zh-CN,zh;q=0.9,en;q=0.8',
						token:this.token,
					},
					data: {
						page:data.page,
						invite_id:that.invite_id,
					},
					method:'POST',
					success: (res) => {
						if(res.data.code == 1){
							// that.list = res.data.data.data;
							that.list = [...that.list, ...res.data.data.data];
							if(res.data.data.data.length > 0){
								callback({ list: that.list, total:res.data.data.total});
							}else{
								if(data.page <= 1){
									callback({ list: that.list, total:res.data.data.total});
								}else{
									return false;
								}
							}
						}
					}
				});
			},

			// 模拟请求数据刷新
			handleRefresh(data, callback) {
				let that = this;
				uni.request({
					url: that.api_url+'api/life.user/inviteenroll', //仅为示例，并非真实接口地址。
					header: {
						// 'X-Auth-Token': 123456, //授权token
						'accept-language': 'zh-CN,zh;q=0.9,en;q=0.8',
						token:this.token,
					},
					data: {
						page:data.page,
						invite_id:that.invite_id,
					},
					method:'POST',
					success: (res) => {
						if(res.data.code == 1){
							// that.list = res.data.data.data;
							that.list = res.data.data.data;
							callback({ list: that.list, total: res.data.data.total });
						}
					}
				});
			},

以下是TP后端代码：

/**
     * 我的发布
     */
    public function sport(){

        $user       =   $this->auth->getUser();
        $limit      =   input('limit',15,'intval');
        $page       =   input('page',1,'intval');
        $list       =   LifeSportModel::where(['user_id'=>$user['id']])->relation('user')->page($page,$limit)->order('id desc')->select();
        $total      =   LifeSportModel::where(['user_id'=>$user['id']])->count();
        $this->success(__('Operation completed'),['data'=>$list,'total'=>$total]);  
    }