vue实现滚动加载_vue滚动分页加载

1.实现某个div的滚动加载

1.html

<div ref="box"></div>
1

2.js

data () {
    return {
        timeList: [],
        // 分页
        page: 1, // 当前页
        page_size: 10, // 每页总条数
        page_count: 1, // 总页数
    }
},
mounted () {
    this.$refs.box.addEventListener('scroll', this.lazyLoading) // 滚动到底部，再加载的处理事件
},
methods:{
	// 请求接口，获取数据
	getData () {
	    const params = {
	    	page: this.page,
            page_size: this.page_size,
        }
	    this.$api.getAttackTimeline(params).then(res => {
	    	this.page_count = res.page_count
	        this.timeList = this.timeList.concat(res.results)
	    })
	},
	// 滚动加载
	lazyLoading (e) {
	    const scrollTop = e.target.scrollTop // 滚动条滚动时，距离顶部的距离
	    const windowHeight = e.target.clientHeight // 可视区的高度
	    const scrollHeight = e.target.scrollHeight // 滚动条的总高度
	    // 滚动条到底部
	    if (scrollTop + windowHeight === scrollHeight) {
	        this.page++
	        if (this.page > this.page_count) return
	        this.getData()
	    }
	},
}
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

2.监听整个窗口的滚动加载

mounted() {
    window.addEventListener('scroll', this.lazyLoading); // 滚动到底部，再加载的处理事件
},
methods: {
    lazyLoading () { // 滚动到底部，再加载的处理事件
        const scrollTop = document.documentElement.scrollTop 
1
2
3
4
5