滚动分页，页面滚动到底部

最新推荐文章于 2024-04-21 09:58:22 发布

Zxf_xcn

最新推荐文章于 2024-04-21 09:58:22 发布

阅读量377

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/Zxf_xcn/article/details/114364366

版权

vue页面控制滚动到底部

//聊天框
  this.$nextTick(() => {
        this.$refs.chatBox.scrollTop = this.$refs.chatBox.scrollHeight; // 滚动高度
      });

滚动分页

//element中table的ref通过bodyWrapper获取
//普通标签把bodyWrapper去掉

function loadMore (refName,curPage,totalPage,callback) {
    let box = refName ? this.$refs[refName].bodyWrapper : document.body;//获取监听元素
    box.addEventListener("scroll", () => { // 监听滑动 
        const scrollTop    = box.scrollTop; // 滑动距离
        const scrollHeight = box.scrollHeight; // 滑动高度
        const clientHeight = box.offsetHeight; // 元素视口高度
        if (scrollTop + clientHeight >= scrollHeight && curPage < totalPage) {
            callback && callback();
        }
    });
    }