Vue实现上拉加载下一页效果的示例代码

　　/**

　　* @name: 监听 滚动条变化

　　* @author: camellia

　　* @date: 2021-10-10

　　*/

　　const handleScroll = (env:any) => {

　　// =========================================================================

　　// 回到顶部

　　let scrollTop = document.getElementsByClassName('top-div')[0].scrollTop;

　　if(scrollTop > 100)

　　{

　　data.flag_scroll = true

　　}

　　else

　　{

　　data.flag_scroll = false

　　}

　　// ===============================================

　　// 上拉加载下一页代码

　　let clientHeight = document.getElementsByClassName('top-div')[0].clientHeight;

　　let scrollObj = (null);

　　// 设备/屏幕高度

　　scrollObj = document.querySelector('.top-div'); // 滚动区域

　　// var scrollTop_page = document.documentElement.scrollTop || document.body.scrollTop;

　　let scrollHeight = data.scrollHeight;

　　if (scrollObj != null)

　　{

　　scrollHeight = scrollObj.scrollHeight // 滚动条的总高度

　　data.scrollHeight = scrollHeight;

　　}

　　console.log("scrollObj：" + scrollObj);

　　console.log("scrollHeight：" + scrollHeight);

　　console.log("scrollTop:"+scrollTop );

　　console.log("clientHeight:"+ clientHeight);

　　console.log("total:"+ (scrollTop + clientHeight));

　　if ( scrollTop + clientHeight === scrollHeight)

　　{

　　data.scrollTop = scrollTop;

　　// div 到头部的距离 + 屏幕高度 = 可滚动的总高度

　　// 滚动条到底部的条件

　　getData();// 获取下一页数据

　　}//*/

　　}