采美百科页面接口调试

src/main/resources/static/js/encyclopedia/search.js

@@ -1,4 +1,4 @@
-new Vue({
+const searchList = new Vue({
     el: '#searchList',
     data: {
         listQuery: {
@@ -17,31 +17,43 @@ new Vue({
         hasNextPage: false,
         list: [],
     },
-    created(){
+    created() {
         this.listQuery.name = decodeURIComponent(CAIMEI.getUrlParam('keyword'))
-        this.$nextTick(()=>{
+        this.$nextTick(() => {
             $('#searchInput').val(this.listQuery.name)
         })
         this.getList()
     },
+    mounted() {
+        const self = this
+        window.addEventListener('scroll', debounce(function () {
+            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
+            if (document.body.scrollHeight <= window.screen.height + scrollTop) {
+                console.log('已经滚动到底部了')
+                if (!self.hasNextPage) return
+                self.getList()
+            }
+        }))
+    },
     methods: {
         filterList() {
             this.listQuery.pageNum = 1
             this.getList()
         },
-        getList(){
+        getList() {
             const self = this
-            if(this.listQuery.pageNum > this.totalPage){
+            if (this.listQuery.pageNum > this.totalPage) {
                 this.listQuery.pageNum = this.totalPage
             }
-            if(this.listQuery.pageNum < 1){
+            if (this.listQuery.pageNum < 1) {
                 this.listQuery.pageNum = 1
             }
             shopBikeApi.FetchEntryList(this.listQuery, function (res) {
-                self.list = res.data.results
+                self.list = [...self.list, ...res.data.results]
                 self.totalPage = res.data.totalPage
                 self.hasNextPage = res.data.hasNextPage
                 self.totalRecord = res.data.totalRecord
+                self.listQuery.pageNum++
             })
         }
     }

src/main/resources/static/js/utils.js

@@ -346,3 +346,31 @@ function fetchDaysByYear(year, month) {
   }
   return days;
 }
+
+/**
+ * 防抖
+ * @param {Function} func 需要包装的函数
+ * @param {string} wait 等待执行时间
+ * @param {string} immediate 是否是立即执行 默认不立即执行
+ * @returns {Function} 返回包装后的函数
+ */
+function debounce(func, wait = 200, immediate = false) {
+    let timeout, result
+    return function () {
+        const context = this
+        const args = arguments
+        if (timeout) clearTimeout(timeout)
+        if (immediate) {
+            const callNow = !timeout
+            timeout = setTimeout(function () {
+                timeout = null
+            }, wait)
+            if (callNow) result = func.apply(context, args)
+        } else {
+            timeout = setTimeout(function () {
+                func.apply(context, args)
+            }, wait)
+        }
+        return result
+    }
+}