瀏覽代碼

:sparkles: using intersection to load more posts on list

tags/0.9.0
J 4 年之前
父節點
當前提交
409bf781d1
共有 3 個檔案被更改,包括 26 行新增8 行删除
  1. 13
    1
      vue-theme/src/pages/list.vue
  2. 7
    5
      vue-theme/src/pages/mixin-post-types.js
  3. 6
    2
      vue-theme/src/store/modules/page.js

+ 13
- 1
vue-theme/src/pages/list.vue 查看文件

132
         },
132
         },
133
         async checkAndSetHero(type) {
133
         async checkAndSetHero(type) {
134
             if (!this['allPagesLoaded']) {
134
             if (!this['allPagesLoaded']) {
135
-                await this.$store.dispatch('getAllPages')
135
+                await this.$store.dispatch('getAllPages', { sortType: null, params: null})
136
             }
136
             }
137
 
137
 
138
             // We always set a hero no matter what
138
             // We always set a hero no matter what
194
             setTimeout(() => this.scrollTo(this.$route.hash), TIMEOUT)
194
             setTimeout(() => this.scrollTo(this.$route.hash), TIMEOUT)
195
         }
195
         }
196
     },
196
     },
197
+    unmounted() {
198
+        window.removeEventListener("load", e => {}, false)
199
+    },
197
     created() {
200
     created() {
201
+        window.addEventListener("load", e => {
202
+            const footerEl = document.querySelector(".page--list article footer")
203
+            const observer = new IntersectionObserver(this.loadMorePosts, {
204
+                root: null,
205
+                rootMargin: "0px",
206
+            })
207
+            observer.observe(footerEl)
208
+        }, false)
209
+
198
         let type = convertTitleCase(this.type) + 's'
210
         let type = convertTitleCase(this.type) + 's'
199
         this.checkAndSetHero(this.type)
211
         this.checkAndSetHero(this.type)
200
 
212
 

+ 7
- 5
vue-theme/src/pages/mixin-post-types.js 查看文件

9
  */
9
  */
10
 const getterHelper = {}
10
 const getterHelper = {}
11
 for (let type of postTypes) {
11
 for (let type of postTypes) {
12
+    let capitalized = convertTitleCase(type)
13
+    
12
     if (type != 'sticky') {
14
     if (type != 'sticky') {
13
-        const capitalized = convertTitleCase(type) + 's'
14
-
15
-        getterHelper[`all${capitalized}BySlug`] = `all${capitalized}BySlug`
16
-        getterHelper[`all${capitalized}`] = `all${capitalized}`
17
-        getterHelper[`all${capitalized}Loaded`] = `all${capitalized}Loaded`
15
+        capitalized = capitalized + 's'
18
     }
16
     }
17
+
18
+    getterHelper[`all${capitalized}BySlug`] = `all${capitalized}BySlug`
19
+    getterHelper[`all${capitalized}`] = `all${capitalized}`
20
+    getterHelper[`all${capitalized}Loaded`] = `all${capitalized}Loaded`
19
 }
21
 }
20
 getterHelper[`upcomingAndCurrentEvents`] = `upcomingAndCurrentEvents`
22
 getterHelper[`upcomingAndCurrentEvents`] = `upcomingAndCurrentEvents`
21
 getterHelper[`pastEvents`] = `pastEvents`
23
 getterHelper[`pastEvents`] = `pastEvents`

+ 6
- 2
vue-theme/src/store/modules/page.js 查看文件

15
 
15
 
16
 // actions
16
 // actions
17
 const actions = {
17
 const actions = {
18
-    async getAllPages({ commit }, { sortType }) {
18
+    async getAllPages({ commit }, { sortType, params }) {
19
         commit('PAGES_LOADED', false)
19
         commit('PAGES_LOADED', false)
20
-        return await api.getByType({ type: 'page', sort: sortType, cb: pages => {
20
+        return await api.getByType({
21
+            type: 'page',
22
+            sort: sortType,
23
+            params,
24
+            cb: pages => {
21
                 commit('STORE_FETCHED_PAGES', { pages })
25
                 commit('STORE_FETCHED_PAGES', { pages })
22
                 commit('PAGES_LOADED', true)
26
                 commit('PAGES_LOADED', true)
23
             }
27
             }

Loading…
取消
儲存