JS异步观察目标元素方式完成分页加载_JavaScript_

{{item}}
' 
 loading.. 
 #app{ display: none; &.active{ display: block; } } ul{ width: 100%; li{ width: 100%; height: 10vh; display: flex; align-items: center; justify-content: start; box-sizing: border-box; padding: 0 3%; position: relative; border-bottom: 1px solid #efefef; font-size: 14px; font-family: fantasy, Courier, monospace; span{ display: inline-block; min-width: 30px; text-align: center; } p{ flex: 1; height: 4vh; background-color: #e2e2e2; margin-left: 3%; } } } .loading{ font-family: fantasy, Courier, monospace; display: flex; height: 15vh; align-items: center; justify-content: center; animation: loading 1s linear infinite; } @keyframes loading{ 0%,100%{ opacity: 1; } 50%{ opacity:0; } } import { createApp } from 'https://unpkg.com/petite-vue?module' createApp({ num: 0, page:1, active:false, observer:null, isLoading:false, mounted() { this.active = true; this.loading = this.$refs.loading; this.observer= new IntersectionObserver(()=>{ this.addNum(); },{ root:window.document, rootMargin:"0px 0px 0px 0px", threshold:0 }) this.observer.observe(this.loading) // this.observer.unobserve(this.loading) }, addNum(){ if(this.isLoading) return; this.isLoading = true; console.log(`loading,page:${this.page}`) setTimeout(()=>{ this.num += 20; this.page ++; this.$nextTick(()=>{ this.isLoading = false; }) },1000) } }).mount() 

// 获取监听目标 this.loading = this.$refs.loading; // 用构造器创建监听区域对象 this.observer= new IntersectionObserver(()=>{ this.addNum(); },{ root:window.document, // 监听区域，默认为整个可视窗体 rootMargin:"0px 0px 0px 0px", // 类似margin，为边界的偏移量用于判定范围是否满足计算需要，默认0px 0px 0px 0px threshold:0 // 阈值(0-1)，表示交叉区域的比例值，默认为0 }) // this.observer.observe(this.loading) 

 loading..