赞
踩
html部分
- <div id="scro" style="height:300px;overflow: auto;" >
- <a-table
- style="margin-top:20px;background:#fff" :columns="columns"
- :dataSource="dataSource" :customRow="customRow" :pagination="false">
- </a-table>
- </div>
js部分
- beforeDestroy () {
- // 要进行函数卸载
- this.scroEl.removeEventListener('scroll', this.handleScroll)
- },
- mounted () {
- // this.dragJs()
- this.listenerFunction()
- var scroEl = document.getElementById('scro')
- this.scroEl = scroEl
- },
- methods: {
- // 监听滚动事件 scroEl是table外的div的dom
- listenerFunction (e) {
- var scroEl = document.getElementById('scro')
- scroEl.addEventListener('scroll', this.handleScroll, true)
- },
- handleScroll () {
- // scroel
- var scroEl = document.getElementById('scro')
- // 获取内容高度
- const scrollHeight = scroEl.scrollHeight
- // 获取滚动条纵坐标位置
- const scrollTop = scroEl.scrollTop
- // 我给的div高度是300px
- // 判断是否到底部是的话把数据push进去
- if (scrollHeight === scrollTop + 300) {
- this.dataSource.push({
- name: '测试',
- age: 16,
- address: '测试',
- key: 13
- })
- }
- },
- }
判断滚动条是否触底逻辑就是 scrollHeight===scrollTop+div的高度(或者window.clientheight)
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。