feat: 瀑布流

src/Content.svelte

@@ -4,6 +4,13 @@
   import { _category, _detailWindow, _env, _tagTrans } from './stores';
   import { fade } from 'svelte/transition';
 
+  //NextPage指示瀑布流下次应请求的页码数
+  let nextPage = 1;
+  //NextPage指示瀑布流下次应请求的limit数
+  let limit = 20;
+  //若isEnd（已经没有新的结果了）则滚动到最底不再请求下一页的数据
+  let isEnd = false;
+
   // -----------------------------
   // 各种请求封装头 & 请求函数
 
@@ -21,17 +28,18 @@
 
   /**请求封装头 -> 获取所有资料*/
   const getContentsRequest = {
-    url: `${$_env}/query.php?action=get`,
+    url: `${$_env}/query.php?action=get&limit=${limit}&page=${nextPage}`,
     params: { method: 'GET' }
   };
 
+
   /**请求封装头 -> 搜索对应 Tag (函数形式)
    * @param {string} tag TAG
    * @return {object} 请求封装对象
    */
   const searchTagRequest = tag => {
     return {
-      url: `${$_env}/query.php?action=get&tag=${encodeURIComponent(tag)}`,
+      url: `${$_env}/query.php?action=get&limit=${limit}&page=${nextPage}&tag=${encodeURIComponent(tag)}`,
       params: { method: 'GET' }
     };
   };
@@ -42,7 +50,7 @@
    */
   const searchCategoryRequest = category => {
     return {
-      url: `${$_env}/query.php?action=get&category=${category}`,
+      url: `${$_env}/query.php?action=get&limit=${limit}&page=${nextPage}&category=${category}`,
       params: { method: 'GET' }
     };
   };
@@ -53,7 +61,7 @@
    */
   const searchTextRequest = text => {
     return {
-      url: `${$_env}/query.php?action=get&search=${encodeURIComponent(text)}`,
+      url: `${$_env}/query.php?action=get&limit=${limit}&page=${nextPage}&search=${encodeURIComponent(text)}`,
       params: { method: 'GET' }
     };
   };
@@ -86,6 +94,7 @@
       .then(data => {
         // console.log(data);
         if (!data.length) {
+          isEnd = true;
           toast.push('没有搜索到东西捏~');
           return;
         }
@@ -111,34 +120,86 @@
    */
   function showList(data) {
     // List = [...List, ...data];
-    List = [];
 
     // <!-- FIXME: 暂时以这种略微丑陋的方式做切换动画, 可能这就是唯一方案了 -->
     setTimeout(() => {
       List = [...data];
+      isSearching = false;
+    }, 400);
+  }
+
+  /**渲染 & 更新视图
+   * @param data JSON数据
+   */
+   function appendList(data) {
+    // List = [...List, ...data];
+    List = [];
+    // <!-- FIXME: 暂时以这种略微丑陋的方式做切换动画, 可能这就是唯一方案了 -->
+    setTimeout(() => {
+      List = [...List, ...data];
+      isSearching = false;
     }, 400);
   }
 
+  let lastSearchFunc = null;
+  let lastSearchParam = null;
+  let isSearching = false;
+
+  function continueLastSearch() {
+    if (lastSearchFunc) {
+      lastSearchFunc(lastSearchParam);
+    }
+  }
+
   /**根据 TAG 搜索游戏
    * @param {string} tag TAG
    */
-  function searchTag(tag) {
+  function searchTag(tag, pageLimit = 20, page = 1) {
+    if (isSearching) {
+      return;
+    }
+    isSearching = true;
+    isEnd = false;
+    limit = pageLimit;
+    nextPage = page;
+    lastSearchParam = tag;
+    if (page > 0) {
+      nextPage = page;
+    }
+    lastSearchFunc = searchTag;
     if (process.env.APP_ENV === 'dev') console.log(tag, encodeURIComponent(tag));
     createFetch(searchTagRequest(tag), data => {
       if (process.env.APP_ENV === 'dev') console.log(data);
-      showList(data);
+      if (page == 1) {
+        showList(data);
+      }
+      isSearching = false;
     });
+    nextPage++;
   }
 
   /**根据 category 搜索游戏
    * @param {string} category category
    */
-  function searchCategory(category) {
+  function searchCategory(category, pageLimit = 20, page = 1) {
+    if (isSearching) {
+      return;
+    }
+    isSearching = true;
+    isEnd = false;
+    limit = pageLimit;
+    nextPage = page;
+    lastSearchParam = category;
+    if (page > 0) {
+      nextPage = page;
+    }
+    lastSearchFunc = searchCategory;
     if (process.env.APP_ENV === 'dev') console.log(category);
     createFetch(searchCategoryRequest(category), data => {
       if (process.env.APP_ENV === 'dev') console.log(data);
-      showList(data);
+      page == 1 ? showList(data) : appendList();
     });
+    nextPage++;
   }
 
   /**@var {string} 上次搜索内容*/
@@ -146,17 +207,25 @@
   /**根据 title 搜索游戏
    * @param {string} title 名称
    */
-  export function searchTitle(title) {
-    if (title === lastSearch) {
-      toast.push('搜索名称重复捏~');
+  export function searchTitle(title, pageLimit = 20, page = 1) {
+    if (isSearching) {
       return;
     }
-    lastSearch = title;
+    isSearching = true;
+    isEnd = false;
+    limit = pageLimit;
+    nextPage = page;
+    lastSearchParam = title;
+    if (page > 0) {
+      nextPage = page;
+    }
+    lastSearchFunc = searchTitle;
     if (process.env.APP_ENV === 'dev') console.log('执行搜索:\t', title);
     createFetch(searchTextRequest(title), data => {
       if (process.env.APP_ENV === 'dev') console.log(data);
-      showList(data);
+      page == 1 ? showList(data) : appendList();
     });
+    nextPage++;
   }
   window.searchTitle = searchTitle;
 
@@ -164,11 +233,17 @@
    * 默认搜索 -> 暂时是全部搜索
    * TODO: 全局内容 30分钟 一次缓存在 localstorage 里
    */
-  export function searchDefault() {
+  export function searchDefault(_,pageLimit = 20, page = 1) {
+    isSearching = true;
+    isEnd = false;
+    limit = pageLimit;
+    nextPage = page;
+    lastSearchParam = "";
     createFetch(getContentsRequest, data => {
       if (process.env.APP_ENV === 'dev') console.log(data);
-      showList(data);
+      page == 1 ? showList(data) : appendList();
     });
+    nextPage++;
   }
 
   /**获取封面图
@@ -217,6 +292,14 @@
     });
   }
 
+  //拉动到页面底部则更新数据
+  window.scroll(function () {  
+			//滚动到底部时
+			if (window.scrollTop() + window.height() > document.height() - 1.0 && !isSearching) {   
+				continueLastSearch();
+				//具体数据操作
+      }
+  });
   // 初始化请求 -> 拉取全部条目
   searchDefault();
 </script>

vite.config.js

@@ -16,7 +16,7 @@ export default defineConfig({
   server: {
     proxy: {
       "/api/": {
-        target: "http://192.168.31.103:25702",
+        target: "http://rrpg.duels.link",
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, ""),
       },