uni-app实现列表的上拉加载，下拉刷新、回到顶部功能

在使用uni-app做app和小程序时，经常会遇到一些列表，这个时候就需要列表能够实现上拉加载更多、下拉刷新的功能，具体效果如下：

此功能比较简单，就不过多介绍了直上代码：

HTML部分

// 活动列表
	<view class="activityList">
	// 每一项活动（可替换）
		<view class="activityItem" v-for="(item,index) in activeList" :key='index'>
			<view class="top">
				<view class="user">
					<image :src="item.Photo ? $ImgUrl + item.Photo : baseUrl" mode="scaleToFill"></image>
					{{item.UserName}}
				</view>
				<view class="time">
					{{item.CreaTime}}
				</view>
			</view>	
		</view>
			// 加载提示信息
		<view class="loading">{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}</view>
	</view>
	
	<!-- 回到顶部 -->
	<view class="goTop" @click="goTop" :style="{'display':(flag===true? 'block':'none')}">
		<text class="iconfont icon-xiangshang"></text>  // iconfont icon-xiangshang  引入的阿里图标
	</view>

javascript部分

// 后台接口
import {
		StudentactivityList
	} from '../../api/activity.js'
export default {
		data() {
			return {
				flag: false,
				loadingType: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				params: {
					Page: 1,
					PageCount: 5
				},
				activeList: []
			}
		},
		onShow() {
			this.getList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.params.Page = 1
			this.getList();
		},
		// 触底加载
		onReachBottom() {
			if (this.loadingType != 0) { //loadingType!=0;直接返回
				return false;
			}
			this.loadingType = 1;
			this.params.Page++; //每触底一次 page +1
			uni.showNavigationBarLoading(); //显示加载动画
			StudentactivityList(this.params).then(res => {
				this.activeList = [...this.activeList, ...res.data.list]
				this.typeConversion()
				this.loadingType = 0; //将loadingType归0重置
				uni.hideNavigationBarLoading(); //关闭加载动画
				if (this.params.Page == res.data.pages) { //没有数据
					this.loadingType = 2;
					uni.hideNavigationBarLoading(); //关闭加载动画
					return false;
				}
			}, res => {
			// 接口提示暂无数据
				this.loadingType = 2; //将loadingType归0重置
				uni.hideNavigationBarLoading(); //关闭加载动画
				uni.stopPullDownRefresh()
			})
		},
		methods: {
			// 获取列表
			getList() {
				this.loadingType = 1;
				uni.showNavigationBarLoading();
				StudentactivityList(this.params).then(res => {
					this.activeList = res.data.list
					this.typeConversion()
					uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
					this.loadingType = 0;
					if (this.params.Page == res.data.pages) { //没有数据
						this.loadingType = 2;
						uni.hideNavigationBarLoading(); //关闭加载动画
						return false;
					}
				}, res => {
				// 接口提示暂无数据
					this.loadingType = 2; //将loadingType归0重置
					uni.hideNavigationBarLoading(); //关闭加载动画
					uni.stopPullDownRefresh()
					this.activeList = []
				})
			},
			//  回到顶部
			goTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});

			},
			// 回到顶部显示
			onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
				if (e.scrollTop > 300) { //当距离大于600时显示回到顶部按钮
					this.flag = true
				} else { //当距离小于600时隐藏回到顶部按钮
					this.flag = false
				}
			},
		}
	}

css部分：

.goTop {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background-color: $uni-color-primary;
		text-align: center;
		line-height: 50rpx;
		position: fixed;
		bottom: 180rpx;
		right: 60rpx;

		text {
			color: #FFFFFF;
		}
	}
	.loading {
			text-align: center;
			line-height: 80px;
			font-size: 28rpx;
		}

样式部分只包含了回到顶部和加载文字，其他样式未复制，项目结束记录一下，如果各位大佬有更方便的解决办法也可以在评论里留下，互相学习进步
更多文章__> >> 码砖猿的技术博客