【uniapp，触底加载，下拉刷新】【h5】滚动区域滚动触发触底加载 scroll-view_uniapp onreachbottom

scroll-view 可滚动视图区域。用于区域滚动。

template

<scroll-view
				scroll-y="true"
				class="scrollbox"
				@scrolltolower="lower"
				enable-back-to-top="true" 
				lower-threshold="112"
			>
			    // 主要内容
				<view></view>
 </scroll-view>
1
2
3
4
5
6
7
8
9
10

script

lower(){
	 console.log('触底加载')
},
1
2
3

css

.scrollbox{
	height: calc(100vh - 580rpx);
}
1
2
3

二，onReachBottom 触底加载，onPullDownRefresh下拉刷新

首先，在page.json的style下设置

"pages": [ 
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app",
				"enablePullDownRefresh": true //开启下拉刷新 设置参数为true
				"onReachBottomDistance":20, //距离底部多远时触发 单位为px
			}
		}
	]
1
2
3
4
5
6
7
8
9
10

然后在页面使用即可，与生命周期函数同一级别

```go
onReachBottom() {
	console.log('触底加载')
	// if(this.list.length < this.total){
	// 	this.page++;
	// 	this.getlist();
	// }
},
onPullDownRefresh() {
	console.log('下拉刷新')
	setTimeout(function () {
			uni.stopPullDownRefresh();
	}, 1000);
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

下拉刷新，onPullDownRefresh

在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。
1. 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。
2. 当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新
1
2
3

pages.json

{
    "pages": [
        {
        	"path": "pages/index/index",
        	"style": {
        		"navigationBarTitleText": "uni-app",
        		"enablePullDownRefresh": true
        	}
        }
    ],
    "globalStyle": {
    	"navigationBarTextStyle": "white",
    	"navigationBarBackgroundColor": "#0faeff",
    	"backgroundColor": "#fbf9fe"
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

index.vue

// 仅做示例，实际开发中延时根据需求来使用。
export default {
	data() {
		return {
			text: 'uni-app'
		}
	},
	onLoad: function (options) {
		setTimeout(function () {
			console.log('start pulldown');
		}, 1000);
		uni.startPullDownRefresh();
	},
	onPullDownRefresh() {
		console.log('refresh');
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

触底加载 ， onReachBottom

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