uniapp实现上拉刷新

不废话直接上图，上代码.

<template>
	<view class="content integral">
		<view class="integral-list" v-for="(item,index) in recordlist" :key="index">
			<view class="integral-list-header">
				<view class="integral-list-header-account">{{item.memberAccount||'XX科技公司'}}</view>
				<view class="integral-list-header-points" v-if="item.points>0">
					+{{item.points}}
				</view>
				<view class="integral-list-header-points green" v-if="item.points<=0">
					{{item.points}}
				</view>
			</view>
                        <template v-if="item.points>0">
                            <view class="integral-list-main">
					<view class="integral-list-main-list">
						<view>结果状态</view>
						<view>{{item.status?'成功':'失败'}}</view>
					</view>
					<view class="integral-list-main-list">
						<view>用户账号</view>
						<view>{{item.memberAccount||'XX科技'}}</view>
					</view>
					<view class="integral-list-main-list">
						<view>支付方式</view>
						<view>{{item.type.split('-')[1]}}</view>
					</view>
					<view class="integral-list-main-list">
						<view>交易编号</view>
						<view>{{item.id}}</view>
					</view>
				</view>
			</template>
			<template v-if="item.points<=0">
				<view class="integral-list-main">
					<view class="integral-list-main-list">
						<view>结果状态</view>
						<view>{{item.status?'成功':'失败'}}</view>
					</view>
					<view class="integral-list-main-list">
						<view>用户账号</view>
						<view>{{item.memberAccount||'XX科技'}}</view>
					</view>
					<view class="integral-list-main-list">
						<view>消费金额</view>
						<view>{{item.points}}</view>
					</view>
					<view class="integral-list-main-list">
						<view>发放账号</view>
						<view>{{item.vendorTel ||'XX科技'}}</view>
					</view>
					<view class="integral-list-main-list">
						<view>发放方式</view>
						<view>{{item.type.split('-')[1]}}</view>
					</view>
				</view>
			</template>
		</view>
		<view class="null" v-if="page == pages">没有更多交易记录了</view>
	</view>
</template>

	export default {
		data() {
			return {
				page: 1, //默认页数
				pages: 0,
				isPull: false,
				recordlist: [], //交易数据列表
			};
		},
		onLoad() {
			this.getList()
		},
		// 监听用户下拉动作，一般用于下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.isPull = true;
			this.getList();
		},
		// 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。
		onReachBottom() {
			if (this.page < this.pages) {
				this.page++;//请求页数+1
				this.getList();
			}
		},
		methods: {
			getList() {
				this.$http('/vendor/pointsLog', {
					page: this.page,
					pageSize: 10
				}, "POST").then(data => {
					uni.stopPullDownRefresh();
					this.pages = data.data.pages;
					if (this.isPull) {
						this.isPull = false;
						this.recordlist = [];
					}
					this.recordlist = this.recordlist.concat(data.data.list);//合并拼接新老数据
				})
			},
		}
	}
</script>

	.integral {
		min-height: 100vh;
		padding-bottom: 20upx;
		background: #F4F4F4;

		&-list {
			padding: 0 20upx;
			background-color: #FFFFFF;
			margin-bottom: 20upx;

			&-header {
				padding: 30upx 0;
				border-bottom: 1upx solid #EBEBEB;
				text-align: center;

				&-account {
					font-size: 26upx;
					color: #181818;
				}

				&-points {
					margin-top: 20upx;
					color: #F95151;
					font-size: 42upx;

					&.green {
						color: #06C05F;
					}
				}
			}
			&-main {
				padding: 20upx 10upx;

				&-list {
					display: flex;
					flex-direction: row;

					view {
						width: 160upx;
						line-height: 50upx;
						font-size: 26upx;
						color: #8B8B8B;

						&:last-child {
							width: calc(100% - 160upx);
							color: #181818;
						}
					}
				}
			}
		}
		.null {
			text-align: center;
			color: #AAAAAA;
			font-size: 24upx;
		}
	}
</style>

onReachBottom使用注意 可在pages.json里定义具体页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。

参考：https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%E9%A1%B5%E9%9D%A2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F