vue判断内容是否滑动到底部的三种方式-IT俱乐部

方式一：直接给滚动的部分加个 @scroll=”handleScroll” 然后js里面进行业务处理

    


methods: {
    // 滚动事件
    handleScroll(event) {
      const dialog = event.target;
      if (dialog.scrollHeight - dialog.scrollTop === dialog.clientHeight) {
        // 当内容滑动到底部时，执行想要的操作
      }
    }
}

方式二：可以采用给滚动内容，在最后一个内容的div后面追加一个新的元素，然后IntersectionObserver 进行观察


    


mounted() {
    this.addNewElementToTipBlank();
},
 methods: {
    addNewElementToTipBlank() {
      // 创建新元素
      const newElement = document.createElement('div');
      newElement.className = 'tip-box';
      newElement.textContent = 'New Tip Box Added';
      // 找到 tip-blank 类所在的 div 元素
      const tipBlankDivs = document.querySelectorAll('.tip-blank');
      const lastTipBlankDiv = tipBlankDivs[tipBlankDivs.length - 1]; // 获取最后一个 tip-blank 元素
      // 在最后一个 tip-blank 元素后面插入新的 div 元素
      if (lastTipBlankDiv) {
        lastTipBlankDiv.insertAdjacentElement('afterend', newElement);
      }
      // 创建一个观察者实例
      const observer = new IntersectionObserver((entries) => {
        console.log(entries);
        entries.forEach((entry) => {
          // entry.isIntersecting 判断目标元素是否在视口中
          if (entry.isIntersecting) {
            console.log('目标元素在视口中!');
          }
          else {
            console.log('目标元素不在视口中.');
          }
        });
      });
      // 开始观察某个元素
      const targetElement = document.querySelector('.tip-box');
      if (targetElement) {
        observer.observe(targetElement);
      }
      // 停止观察
      // 如果你不再需要观察某个元素，你可以调用：
      observer.unobserve(targetElement);
      // 如果你想停止观察所有元素，你可以调用：
      observer.disconnect();
    },
}

IntersectionObserver具体的用法：
IntersectionObserver 是一个现代的浏览器 API，允许开发者在某个元素与其祖先元素或顶层文档视口发生交叉时得到通知。它非常适合实现图片懒加载、无限滚动、广告曝光率等功能。
1. 浏览器的兼容性
IntersectionObserver目前在大多数现代浏览器中都得到了支持。但是在一些老版本的浏览器，如 IE 中，则没有支持。点击查看 IntersectionObserver 的兼容性
2. 如何使用？

const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        // entry.isIntersecting 判断目标元素是否在视口中
        if (entry.isIntersecting) {
            console.log('目标元素在视口中!');
        } else {
            console.log('目标元素不在视口中.');
        }
    });
});
// 开始观察某个元素
const targetElement = document.querySelector('.some-class');
observer.observe(targetElement);

// 停止观察
// 如果你不再需要观察某个元素，你可以调用：
observer.unobserve(targetElement);
// 如果你想停止观察所有元素，你可以调用：
observer.disconnect();

// 配置选项
当创建 IntersectionObserver 实例时，你可以提供一个配置对象，该对象有以下属性：
const options = {
    root: document.querySelector('.scroll-container'), // 观察目标的父元素，如果不设置，默认为浏览器视口
    rootMargin: '10px', // 增加或减少观察目标的可见区域大小
    threshold: [0, 0.25, 0.5, 0.75, 1] // 当观察目标的可见比例达到这些阈值时会触发回调函数
};
const observer = new IntersectionObserver(callback, options);

3. 一些常见的应用场景

// 图片懒加载
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.lazy;
            observer.unobserve(img);
        }
    });
});
document.querySelectorAll('img[data-lazy]').forEach(img => {
    observer.observe(img);
});

// 无线滚动加载
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            loadMoreContent(); // 你的加载更多内容的函数
            observer.unobserve(entry.target); // 如果你只想加载一次，你可以在这里停止观察
        }
    });
});
const loadMoreTrigger = document.querySelector('.load-more-trigger');
observer.observe(loadMoreTrigger);

方式三 如果前2种方式不可行，可试试这一种


        
            {{item}}
        
    

    data() {
        return {
            caption: []
        };
    },
    methods: {
        // 接口返回数据
        interface() {
            this.caption = ''; // 接口返回数据
            if (this.caption.length > 0) {
                this.$nextTick(() => {
                  this.handleScroll({
                    target: document.querySelector('.tip-info')
                  });
                });
            }
        },
        handleScroll(e) {
          const { scrollTop, clientHeight, scrollHeight } = e.target;
            // 条件判断(scrollHeight - (scrollTop + clientHeight)) / clientHeight <= 0.05
            // 是在计算滚动条距离底部的距离与可视区域高度的比例。如果这个比例小于或等于5%（0.05），则认为滚动条已经非常接近底部。
            if ((scrollHeight - (scrollTop + clientHeight)) / clientHeight <= 0.05) {
                console.log('内容到底了');
            }       
        }  
    }


以上就是vue判断内容是否滑动到底部的三种方式的详细内容，更多关于vue判断内容是否滑动到底部的资料请关注IT俱乐部其它相关文章！


                            
                        

                            

vue
判断
内容
底部



                            
                        


相关文章




 


vuex 设计思路和实现方式

这篇文章主要介绍了vuex 设计思路和实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
 2022-08-08 







 


详解Vue实战指南之依赖注入(provide/inject)

这篇文章主要介绍了详解Vue实战指南之依赖注入(provide/inject)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
 2018-11-11 







 


Vue中使用better-scroll实现轮播图组件

better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。这篇文章主要介绍了Vue中使用better-scroll实现轮播图组件的实例代码,需要的朋友可以参考下
 2020-03-03 







 


vue 顶部消息横向滚动通知效果实现

系统顶部展示一个横向滚动的消息通知,就是消息内容从右往左一直滚动,这篇文章主要介绍了vue顶部消息横向滚动通知,需要的朋友可以参考下
 2024-02-02 







 


Vue中插槽Slot基本使用与具名插槽详解

有时候我们希望在指定的位置输出我们的子元素,这时候具名插槽就排上了用场,这篇文章主要给大家介绍了关于Vue中插槽Slot基本使用与具名插槽的相关资料,需要的朋友可以参考下
 2022-10-10 







 


vue实现一个懒加载的树状表格实例

这篇文章主要介绍了vue实现一个懒加载的树状表格实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
 2022-05-05 







 


vue-router的hooks用法详解

这篇文章主要介绍了vue-router的hooks用法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
 2020-06-06 







 


vue关于select组件绑定的值为数字类型的问题

这篇文章主要介绍了vue关于select组件绑定的值为数字类型的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
 2022-09-09 







 


Vue 使用formData方式向后台发送数据的实现

这篇文章主要介绍了Vue 使用formData方式向后台发送数据的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
 2019-04-04 







 


Vue.js 状态管理及 SSR解析

这篇文章主要介绍了Vue.js状态管理及SSR解析，在vue.js中，我们主要说的状态管理库就是vuex，当然，只要你能实现有条理的组织数据，那么它都可以认为是一种状态管理库
 2022-09-09 








                            
                        
                        

最新评论