Procházet zdrojové kódy

:recycle: setting intersection observer in component state

tags/0.9.0
J před 4 roky
rodič
revize
562bb0b1a0
1 změnil soubory, kde provedl 30 přidání a 16 odebrání
  1. 30
    16
      vue-theme/src/pages/list.vue

+ 30
- 16
vue-theme/src/pages/list.vue Zobrazit soubor

48
         return {
48
         return {
49
             page: 0,
49
             page: 0,
50
             perPage: 6,
50
             perPage: 6,
51
-            keepFetching: true 
51
+            observer: null,
52
+            keepFetching: true,
53
+            isFetching: false
52
         }
54
         }
53
     },
55
     },
54
     computed: {
56
     computed: {
83
 
85
 
84
             console.warn(`loading more ${type} posts...`)
86
             console.warn(`loading more ${type} posts...`)
85
             this.page++
87
             this.page++
86
-            this.getPosts()
88
+            await this.getPosts()
87
         },
89
         },
88
         _getSortBy() {
90
         _getSortBy() {
89
             return this.sortBy
91
             return this.sortBy
146
             const footerEl = document.querySelector(".footer-wrapper footer")
148
             const footerEl = document.querySelector(".footer-wrapper footer")
147
             // console.warn('attach to: ',footerEl)
149
             // console.warn('attach to: ',footerEl)
148
             if(!footerEl) return
150
             if(!footerEl) return
149
-
150
-            window.addEventListener("load", e => {
151
-                const onIntersection = () => {
152
-                    console.log('intersected...')
153
-                    this.loadMorePosts()
154
-                    console.log('loaded...', this.loadMorePosts)
155
-                    console.log('cb this:', this)
156
-                }
157
-                const observer = new IntersectionObserver(onIntersection, {
158
-                    rootMargin: "0px 0px -20px 0px",
151
+            const onIntersect = entries => {
152
+                if(this.isFetching) return
153
+                
154
+                this.isFetching = true
155
+                entries.forEach(({ target, isIntersecting }) => {
156
+                    if (!isIntersecting) return
157
+                    this.observer.unobserve(target)
158
+                    
159
+                    setTimeout(() => {
160
+                        console.log("intersected:", target)
161
+                    }, 1000)
159
                 })
162
                 })
160
-                observer.observe(footerEl)
161
-            }, false)
163
+                this.isFetching = false
164
+                // this.loadMorePosts()
165
+                // console.log('loaded...', this.loadMorePosts)
166
+                // console.log('cb this:', this)
167
+            }
168
+            this.observer = new IntersectionObserver(
169
+                onIntersect,
170
+                {
171
+                    root: this.$el,
172
+                    threshold: 1.0,
173
+                }
174
+            )
162
         },
175
         },
163
         unsetIntersectionLoader(type) {
176
         unsetIntersectionLoader(type) {
164
             if(!type) return console.error('cannot unset intersection handler for undefined type...')
177
             if(!type) return console.error('cannot unset intersection handler for undefined type...')
179
         // This only fires navigating from
192
         // This only fires navigating from
180
         // a list page, to another list page
193
         // a list page, to another list page
181
         type(newType, oldType){
194
         type(newType, oldType){
182
-            this.unsetIntersectionLoader(oldType)
183
-            
184
             console.log('old:', oldType)
195
             console.log('old:', oldType)
185
             console.log('new:', newType)
196
             console.log('new:', newType)
186
             
197
             
192
     mounted() {
203
     mounted() {
193
         this.clearAndInitPostList()
204
         this.clearAndInitPostList()
194
         this.setIntersectionLoader()
205
         this.setIntersectionLoader()
206
+    },
207
+    beforeDestroy() {
208
+        this.observer.disconnect()
195
     }
209
     }
196
 }
210
 }
197
 </script>
211
 </script>

Načítá se…
Zrušit
Uložit