vue实现滚动加载

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

注意 ：前提 实现某个div的滚动要设置div的高度 和 overflow-y:auto,踩坑了
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)
	        if(this.page*this.page_size>= this.page_count) {
            alert("没有更多数据了")
			}
	    })
	},
	// 滚动加载
	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()
	    }
	},
}

页面卸载清除滚动

destroyed() {
        window.removeEventListener('scroll', this.lazyLoading);
    }

至于怎么样判断数据是否加载完毕,到最后一页

每次在请求完成数据的时候去判断一下当前的 page × pagesize是否已经大于等于接口返回的total值就行了

if(this.page*this.page_size>= this.page_count) {
            alert("没有更多数据了")
}

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

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

        if (scrollTop + clientHeight >= scrollHeight) {
            // 滚动到底部，逻辑代码
        }
    },
},

3.监听iview表格的滚动加载

mounted () {
    document.getElementsByClassName('ivu-table-body')[0].addEventListener('scroll', this.lazyLoading) // 滚动到底部，再加载的处理事件
},
methods: {
    // 滚动加载
    lazyLoading () {
        const target = document.getElementsByClassName('ivu-table-body')[0]
        const scrollTop = target.scrollTop // 滚动条滚动时，距离顶部的距离
        const windowHeight = target.clientHeight // 可视区的高度
        const scrollHeight = target.scrollHeight // 滚动条的总高度

        if (scrollTop + windowHeight === scrollHeight) {
            // 滚动到底部，逻辑代码
        }
    },
},

4.监听多个表格的滚动加载

a.需求：一个页面存在多个表格，但只需对其中的部分表格实现滚动加载
b.实现方式：

给每个需要滚动加载的表格加入一个plugin-id
根据plugin-id去获取到对应的表格需要滚动的部分
判断是否有 “pluginId”，若有，则说明此表格需要进行滚动加载
c.具体代码

<div
    v-for='(plugin, pluginIndex) in pluginList'
    :key='pluginIndex'
>
    <Table
        :columns='plugin.columns'
        :data='plugin.table_list'
        :id='`plugin-${plugin.id}`'
    />
</div>

2.js（给表格加入滚动监听）

data () {
    return {
        tableScroll: null, // 滚动的表格
    }
},
mounted () {
    this.getPluginIds() // 获取所有需要实现滚动的id
},
methods: {
   // 获取所有需要实现滚动的id
   getPluginIds () {
        this.$api.getPluginIds().then(res => {
            res.forEach(pluginId => {
                this.addScroll(pluginId) // 监听每个表格的滚动
            })
        })
    },
    // 监听每个表格的滚动
    addScroll (pluginId) {
        this.tableScroll = document.getElementById(`plugin-${pluginId}`).getElementsByClassName('ivu-table-body')[0] // 获取到进行滚动的表格
        this.tableScroll.addEventListener('scroll', this.lazyLoading) // 监听滚动
        this.tableScroll.params = { pluginId } // 给表格详情传入：pluginId
    },
    // 滚动加载
    lazyLoading (event) {
        const pluginId = event.target.params?.pluginId

        // 有pluginId：说明是表格详情，需要做滚动加载
        if (pluginId) {
            const target = document.getElementById(`plugin-${pluginId}`).getElementsByClassName('ivu-table-body')[0]
            const scrollTop = target.scrollTop // 滚动条滚动时，距离顶部的距离
            const windowHeight = target.clientHeight // 可视区的高度
            const scrollHeight = target.scrollHeight // 滚动条的总高度

            if (scrollTop + windowHeight === scrollHeight) {
                // 滚动到底部，逻辑代码
                console.log(pluginId)
            }
        }
    },
},

3.完整的js（给表格加入滚动监听+分页信息的处理）

data () {
    return {
        tableScroll: null, // 滚动的表格
        page: {}, // 所有滚动表格的分页信息
    }
},
mounted () {
    this.getPluginIds() // 获取所有需要滚动加载的id
},
methods: {
    // 获取所有需要滚动加载的id
    getPluginIds () {
        this.$api.getPluginIds().then(res => {
            res.forEach(pluginId => {
                this.dealPlugin(pluginId) // 处理单个的表格
            })
        })
    },
    // 处理单个的表格
    dealPlugin (pluginId) {
        // 给每个需要滚动的表格加入分页信息
        this.page[`plugin-${pluginId}`] = {
            current: 1, // 当前页
            page_size: 10, // 每页总条数
            page_count: 1, // 总页数
        }
        this.getPluginTable(pluginId) // 获取每个表格数据
        this.addScroll(pluginId) // 监听每个表格的滚动
    },
    // 获取插件的表格数据
    getPluginTable (pluginId) {
        const params = {
            page: this.page[`plugin-${pluginId}`].current,
            page_size: this.page[`plugin-${pluginId}`].page_size,
        }
        this.$api.getPluginTable(params, pluginId).then(res => {
            const pluginIndex = this.pluginList.findIndex(item => item.id === plugin_id)
            this.pluginList[pluginIndex].table_list = this.pluginList[pluginIndex].table_list.concat(res.results)
            this.page[`plugin-${pluginId}`].page_count = res.page_count
        })
    },
    // 监听每个表格的滚动
    addScroll (pluginId) {
        this.tableScroll = document.getElementById(`plugin-${pluginId}`).getElementsByClassName('ivu-table-body')[0]
        this.tableScroll.addEventListener('scroll', this.lazyLoading) // 滚动到底部，再加载的处理事件
        this.tableScroll.params = { pluginId } // 给表格详情传入：pluginId
    },
    // 滚动加载
    lazyLoading (event) {
        const pluginId = event.target.params?.pluginId

        // 有pluginId：说明是表格详情，需要做滚动加载
        if (pluginId) {
            const target = document.getElementById(`plugin-${pluginId}`).getElementsByClassName('ivu-table-body')[0]
            const scrollTop = target.scrollTop // 滚动条滚动时，距离顶部的距离
            const windowHeight = target.clientHeight // 可视区的高度
            const scrollHeight = target.scrollHeight // 滚动条的总高度

            if (scrollTop + windowHeight === scrollHeight) {
            // 滚动到底部，逻辑代码
                this.page[`plugin-${pluginId}`].current++
                if (this.page[`plugin-${pluginId}`].current > this.page[`plugin-${pluginId}`].page_count) return
                this.getPluginTable(pluginId)
            }
        }
    },
},

本文参考 ： https://blog.csdn.net/wytraining/article/details/122543795
https://www.jb51.net/javascript/302873mq0.htm