方式一：直接给滚动的部分加个 @scroll=”handleScroll” 然后js里面进行业务处理
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 | <div class="tip-info"> <div class="tip-blank"></div></div><div class="jb51code"><pre class="brush:js;">methods: { // 滚动事件 handleScroll(event) { const dialog = event.target; if (dialog.scrollHeight - dialog.scrollTop === dialog.clientHeight) { // 当内容滑动到底部时，执行想要的操作 } }}</pre></div><p>方式二：可以采用给滚动内容，在最后一个内容的div后面追加一个新的元素，然后IntersectionObserver 进行观察</p><div class="jb51code"><pre class="brush:xhtml;"><div class="tip-info"> <div class="tip-blank"></div></div><div class="jb51code"><pre class="brush:js;">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(); },}</pre></div><p>IntersectionObserver具体的用法：</p><p>IntersectionObserver 是一个现代的浏览器 API，允许开发者在某个元素与其祖先元素或顶层文档视口发生交叉时得到通知。它非常适合实现图片懒加载、无限滚动、广告曝光率等功能。</p><p>1. 浏览器的兼容性</p><p>IntersectionObserver目前在大多数现代浏览器中都得到了支持。但是在一些老版本的浏览器，如 IE 中，则没有支持。<a href="https://www.cnblogs.com/anans/p/17697522.html" rel="external nofollow noopener" target="_blank">点击查看 IntersectionObserver 的兼容性</a></p><p>2. 如何使用？</p><div class="jb51code"><pre class="brush:js;">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);</pre></div><p>3. 一些常见的应用场景</p><div class="jb51code"><pre class="brush:js;">// 图片懒加载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);</pre></div><p>方式三 如果前2种方式不可行，可试试这一种</p><div class="jb51code"><pre class="brush:js;"><div class="tip-info"> <div class="sn-f-c-c tip-blank"> {{item}} </div> </div> 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('内容到底了'); } } }</pre></div><p>以上就是vue判断内容是否滑动到底部的三种方式的详细内容，更多关于vue判断内容是否滑动到底部的资料请关注IT俱乐部其它相关文章！</p><p></p></pre></div><div class="lbd_bot clearfix"> <span id="art_bot" class="jbTestPos"></span> </div><div class="tags clearfix"> <i class="icon-tag"></i><p></p><ul class="meta-tags"><li class="tag item"><a href="https://www.2it.club/tag/vue/1.htm" target="_blank" title="搜索关于vue的文章" rel="nofollow noopener">vue</a></li><li class="tag item"><a href="https://www.2it.club/tag/%E5%88%A4%E6%96%AD/1.htm" target="_blank" title="搜索关于判断的文章" rel="nofollow noopener">判断</a></li><li class="tag item"><a href="https://www.2it.club/tag/%E5%86%85%E5%AE%B9/1.htm" target="_blank" title="搜索关于内容的文章" rel="nofollow noopener">内容</a></li><li class="tag item"><a href="https://www.2it.club/tag/%E5%BA%95%E9%83%A8/1.htm" target="_blank" title="搜索关于底部的文章" rel="nofollow noopener">底部</a></li></ul></div><div class="lbd clearfix"> <span id="art_down" class="jbTestPos"></span> </div><div id="shoucang"></div><div class="xgcomm clearfix"><h2>相关文章</h2><ul><li class="lbd clearfix"><span id="art_xg" class="jbTestPos"></span></li><li><div class="item-inner"><a href="https://www.2it.club/article/258721.htm" title="vuex 设计思路和实现方式" class="img-wrap" target="_blank" rel="noopener"> <img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/04/frc-1a1b05c64693fbf380aa1344a7812747.png"></a><p></p><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.2it.club/article/258721.htm" title="vuex 设计思路和实现方式" rel="noopener">vuex 设计思路和实现方式</a></p><div class="item-info"><div class="js">这篇文章主要介绍了vuex 设计思路和实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教</div><p><span class="lbtn" style="float:right"> 2022-08-08 </span></p></div></div></div></div></li><li><div class="item-inner"><a href="https://www.2it.club/article/150701.htm" title="详解Vue实战指南之依赖注入(provide/inject)" class="img-wrap" target="_blank" rel="noopener"> <img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/04/frc-4f55910a645b073bc4fc65dc10dc14bd.png"></a><p></p><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.2it.club/article/150701.htm" title="详解Vue实战指南之依赖注入(provide/inject)" rel="noopener">详解Vue实战指南之依赖注入(provide/inject)</a></p><div class="item-info"><div class="js">这篇文章主要介绍了详解Vue实战指南之依赖注入(provide/inject)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧</div><p><span class="lbtn" style="float:right"> 2018-11-11 </span></p></div></div></div></div></li><li><div class="item-inner"><a href="https://www.2it.club/article/182134.htm" title="Vue中使用better-scroll实现轮播图组件" class="img-wrap" target="_blank" rel="noopener"> <img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/04/frc-0ea3c7666119d5615e582f823fb3fad6.png"></a><p></p><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.2it.club/article/182134.htm" title="Vue中使用better-scroll实现轮播图组件" rel="noopener">Vue中使用better-scroll实现轮播图组件</a></p><div class="item-info"><div class="js">better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。这篇文章主要介绍了Vue中使用better-scroll实现轮播图组件的实例代码,需要的朋友可以参考下</div><p><span class="lbtn" style="float:right"> 2020-03-03 </span></p></div></div></div></div></li><li><div class="item-inner"><a href="https://www.2it.club/javascript/316678iyl.htm" title="vue 顶部消息横向滚动通知效果实现" class="img-wrap" target="_blank" rel="noopener"> <img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/04/frc-4f96a78db829b1556ff16de21e013c7a.png"></a><p></p><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.2it.club/javascript/316678iyl.htm" title="vue 顶部消息横向滚动通知效果实现" rel="noopener">vue 顶部消息横向滚动通知效果实现</a></p><div class="item-info"><div class="js">系统顶部展示一个横向滚动的消息通知,就是消息内容从右往左一直滚动,这篇文章主要介绍了vue顶部消息横向滚动通知,需要的朋友可以参考下</div><p><span class="lbtn" style="float:right"> 2024-02-02 </span></p></div></div></div></div></li><li><div class="item-inner"><a href="https://www.2it.club/article/266230.htm" title="Vue中插槽Slot基本使用与具名插槽详解" class="img-wrap" target="_blank" rel="noopener"> <img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/04/frc-8cc1031babc6aff2319f1c6af8544aa0.png"></a><p></p><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.2it.club/article/266230.htm" title="Vue中插槽Slot基本使用与具名插槽详解" rel="noopener">Vue中插槽Slot基本使用与具名插槽详解</a></p><div class="item-info"><div class="js">有时候我们希望在指定的位置输出我们的子元素,这时候具名插槽就排上了用场,这篇文章主要给大家介绍了关于Vue中插槽Slot基本使用与具名插槽的相关资料,需要的朋友可以参考下</div><p><span class="lbtn" style="float:right"> 2022-10-10 </span></p></div></div></div></div></li><li><div class="item-inner"><a href="https://www.2it.club/article/249951.htm" title="vue实现一个懒加载的树状表格实例" class="img-wrap" target="_blank" rel="noopener"> <img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/04/frc-0c932a99bb7b6f23c937db507070cc7b.png"></a><p></p><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.2it.club/article/249951.htm" title="vue实现一个懒加载的树状表格实例" rel="noopener">vue实现一个懒加载的树状表格实例</a></p><div class="item-info"><div class="js">这篇文章主要介绍了vue实现一个懒加载的树状表格实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教</div><p><span class="lbtn" style="float:right"> 2022-05-05 </span></p></div></div></div></div></li><li><div class="item-inner"><a href="https://www.2it.club/article/188223.htm" title="vue-router的hooks用法详解" class="img-wrap" target="_blank" rel="noopener"> <img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/04/frc-cca732bf65a93ed2ec0ac80c638460fe.png"></a><p></p><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.2it.club/article/188223.htm" title="vue-router的hooks用法详解" rel="noopener">vue-router的hooks用法详解</a></p><div class="item-info"><div class="js">这篇文章主要介绍了vue-router的hooks用法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下</div><p><span class="lbtn" style="float:right"> 2020-06-06 </span></p></div></div></div></div></li><li><div class="item-inner"><a href="https://www.2it.club/article/261573.htm" title="vue关于select组件绑定的值为数字类型的问题" class="img-wrap" target="_blank" rel="noopener"> <img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/04/frc-2d9f31f2af7b675a3d153d2b7f1035a7.png"></a><p></p><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.2it.club/article/261573.htm" title="vue关于select组件绑定的值为数字类型的问题" rel="noopener">vue关于select组件绑定的值为数字类型的问题</a></p><div class="item-info"><div class="js">这篇文章主要介绍了vue关于select组件绑定的值为数字类型的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教</div><p><span class="lbtn" style="float:right"> 2022-09-09 </span></p></div></div></div></div></li><li><div class="item-inner"><a href="https://www.2it.club/article/159674.htm" title="Vue 使用formData方式向后台发送数据的实现" class="img-wrap" target="_blank" rel="noopener"> <img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/04/frc-b452cee8ec5cd9e58ab98eba17281e59.png"></a><p></p><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.2it.club/article/159674.htm" title="Vue 使用formData方式向后台发送数据的实现" rel="noopener">Vue 使用formData方式向后台发送数据的实现</a></p><div class="item-info"><div class="js">这篇文章主要介绍了Vue 使用formData方式向后台发送数据的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧</div><p><span class="lbtn" style="float:right"> 2019-04-04 </span></p></div></div></div></div></li><li><div class="item-inner"><a href="https://www.2it.club/article/262384.htm" title="Vue.js 状态管理及 SSR解析" class="img-wrap" target="_blank" rel="noopener"> <img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/04/frc-f4838ec7e2d4da28e0b57d4e852dadd4.png"></a><p></p><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.2it.club/article/262384.htm" title="Vue.js 状态管理及 SSR解析" rel="noopener">Vue.js 状态管理及 SSR解析</a></p><div class="item-info"><div class="js">这篇文章主要介绍了Vue.js状态管理及SSR解析，在vue.js中，我们主要说的状态管理库就是vuex，当然，只要你能实现有条理的组织数据，那么它都可以认为是一种状态管理库</div><p><span class="lbtn" style="float:right"> 2022-09-09 </span></p></div></div></div></div></li></ul></div><div class="lbd clearfix mt5"> <span id="art_down2" class="jbTestPos"></span> </div><p> <a href=""></a></p><div id="comments"><h2>最新评论</h2><div class="pd5"><div id="SOHUCS"></div><p></p></div><p></p></div><p></p> |
