vue实现滚动加载
1.实现某个div的滚动加载
1.html
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 || 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.具体代码
1.html
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)
}
}
},
},