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（给表格加入滚动监听+分页信息的处理）文章来源：https://www.toymoban.com/news/detail-835142.html
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文章来源地址https://www.toymoban.com/news/detail-835142.html
到了这里，关于vue实现滚动加载的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
