vue实现滚动加载

置顶

wytraining

已于 2022-09-17 15:36:31 修改

阅读量1.3w

点赞数 10

分类专栏： js 文章标签： vue.js javascript 前端

于 2022-01-17 17:20:00 首次发布

本文链接：https://blog.csdn.net/wytraining/article/details/122543795

版权

本文详细介绍了如何在Vue.js应用中实现滚动加载功能，包括针对特定div、整个窗口、iview表格以及如何处理多个表格的滚动加载。具体步骤包括在HTML中设置触发条件，JavaScript中监听滚动事件，以及在不同场景下的实现代码示例。

摘要由CSDN通过智能技术生成

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

1.html

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

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

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

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