uniapp移动端实现上拉加载(分页),下拉刷新

本文介绍了在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()
		},
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值