uniapp移动端实现上拉加载（分页），下拉刷新

最新推荐文章于 2024-10-29 09:45:58 发布

小杨不香菜

最新推荐文章于 2024-10-29 09:45:58 发布

阅读量1.4k

点赞数 2

CC 4.0 BY-SA版权

文章标签： uni-app javascript 前端

本文链接：https://blog.youkuaiyun.com/Quentin0823/article/details/130400512

本文介绍了在uni-app中实现上拉加载更多数据和下拉刷新页面的功能。上拉加载通过onReachBottom方法，动态更新PageNo并获取数据。下拉刷新则在pages.json配置enablePullDownRefresh，并在onPullDownRefresh方法中调用数据获取方法并停止刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上拉加载

在需要实现该功能的页面写入 onReachBottom（）方法函数，该方法与 onLoad() 方法同级，需在在data中声明 pageNo和pageSize以及总条数，具体代码如下：

html 部分

<-- html部分  引入uview 使用uview加载效果 -->

        <div v-if="loading" style='display: flex;justify-content: center;margin-top: 50rpx;'>
			<u-loading-icon></u-loading-icon>
		</div>

javascript 部分



   data() {
			return {				
				loading: true,
				//页码
				pageNo: 1,
				//页容量
				pageSize: 10,
				//总条数
				total: 0,
				List:[]
			}
		},
      onLoad() {  },
	  // 上拉加载数据
	  onReachBottom() {
	  //判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
			if (this.pageNo * this.pageSize >= this.total){
				uni.$u.toast('数据加载完毕')
				return
			}
			//并且让页码+1,调用获取数据的方法获取第二页数据
			this.pageNo++
			//此处调用自己获取数据列表的方法
			this.Getlist()
		},
		methods: {
		
             // 获取数据列表
			Getlist() {
			   //设置加载效果
				this.loading = true
				//调起接口 将页码入参
				Api({
					params: {
						pageNo: this.pageNo,
						pageSize: this.pageSize
					}
				}).then(res => {
				//如果获取数据成功 将数据赋值给事先声明的数组
					if (res.success) {
						this.List = res.result.records
						//判断 如果获取的数据的页码不是第一页，就让之前赋值获取过的数组数据 concat连接 刚获取的第n页数据
						if (res.result.pages != 1) {
							this.List = this.List.concat(res.result.records)
						} else {
							this.List = res.result.records
						}
						//将获取的总条数赋值
						this.total = res.result.total

					}
					this.loading = false
				})
			},




        }

下拉刷新

打开项目根目录中的 pages.json 配置文件，在需要开始下拉刷新功能的页面路径下添加或者在 globalStyle 中全局添加 enablePullDownRefresh 为true，开始下拉刷新。代码如下：

某个页面开启：

{
			"path": "pages/views/index",
			"style": {
				"navigationBarTextStyle": "white",
				"navigationBarBackgroundColor": "#6495ed",
				"navigationBarTitleText": "首页",
				
				"enablePullDownRefresh": true

			}

		},

全局开启：

"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		
		"enablePullDownRefresh": true,


		}

	},

同样，在与 onLoad() 方法同级处添加以下代码：

// 下拉刷新
		onPullDownRefresh() {
			console.log('刷新')
			//下拉之后 重新调用获取数据的方法
			this.Getlist()
			//获取之后 一定要 调用uni.startPullDownRefresh（） 停止刷新！！！否则将会一直处于刷新状态			
			uni.startPullDownRefresh()
		},