h5移动端 简单的触底分页加载方法_h5上拉触底翻页

1. 初始化页面 滚动监听事件

mounted() {
	window.addEventlinster('scroll', this.windowScroll, false)
}
1
2
3

2. 滚动事件

//数据
data(){
	return{
		list:[],
		page:1, // 分页页数
		limit:10, // 分页条数
		total:0, // 总数
		isLoading: false //是否加载中
	}
}
methods:{
	windowScroll(){
		let innerHeight = doucument.getElementsByClassName('.scroll-content').clientHeight
		let outerHeight = doucument.doucumentElement.clientHeight
		let scrollTop = doucument.doucumentElement.scrollTop ? doucument.doucumentElement.scrollTop : doucument.body.scrollTop

		if(innerHeight  <= (outerHeight + scrollTop  + 10)){
			// 离元素盒子 底部 10px 触底加载
			// 分页+1
			this.page = this.page + 1
			this.getList()
		}
	}

	// 获取列表数据
	getList(){
		// 判断是否需要调用接口
		// 1. 接口加载中时，禁止继续调用接口
		// 2. 当数组长度 大于等于 总数时，禁止继续调用接口 （表示数据 已经全部加载完成）
		if(this.isLoading || this.list.length >= this.total){
			return
		}
		// 开启 加载状态
		this.isLoading = true
		let obj= {
              page: this.page,
              limit: this.limit
            }
        // 接口调用
       	getList(obj).then(res =>{
       		let { data, total } = res
       		// 判断 是否初次加载 
       		// 初次加载时，数组 = 接口获取数据
       		// 后续触发触底加载，数组 = 之前的数组数据 + 新的接口获取数据
			this.list = this.list.length === 0 ? data : this.list.concat(data)
			this.total = +total
			// 接口调用成功时，及时关闭 加载状态
			this.isLoading = false
		}).catch(err =>{
			// 接口调用异常时，关闭加载状态
			this.isLoading = false
			this.list = []
			this.total = 0
		})
	}
}
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