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

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐