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

上拉加载

在需要实现该功能的页面写入 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>
		


1
2
3
4
5
6
7
8

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
				})
			},




        }

		

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

遇到的问题

屏幕上滑onReachBottom不触发

解决

如果你在使用 onReachBottom 的时候没有触发，就看看那个页面有没有出现滚动条，没有就不会触发
因为 view 没有高度（百分百也不行），然后就调用不到 onReachBottom 这个钩子

page {
		height: initial;
		overflow-y: initial;
		min-height: 100vh;
	}

1
2
3
4
5
6

其实配不配置 onReachBottomDistance 都没关系的（个人觉得）

initial 关键字用于设置 CSS 属性为它的默认值

initial 关键字可用于任何 HTML 元素上的任何 CSS 属性
官网
initial
参考原文

下拉刷新

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

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

			}

		},

1
2
3
4
5
6
7
8
9
10
11
12
13

全局开启：

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


		}

	},

1
2
3
4
5
6
7
8
9
10
11
12
13

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

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

1
2
3
4
5
6
7
8
9

参考原文