vue实现滚动加载

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

• « 上一篇：2022高教社杯数学建模国赛C题思路代码实现
• » 下一篇：多目标优化算法matlab代码大合集