Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Sign in / Register
Toggle navigation
R
rrpgLink_FrontEnd
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Locked Files
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Security & Compliance
Security & Compliance
Dependency List
License Compliance
Packages
Packages
List
Container Registry
Analytics
Analytics
CI / CD
Code Review
Insights
Issues
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Kesaubeeire
rrpgLink_FrontEnd
Commits
ffe5503e
Commit
ffe5503e
authored
Oct 22, 2023
by
JoyJ
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 瀑布流
parent
25eeb5db
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
100 additions
and
17 deletions
+100
-17
src/Content.svelte
src/Content.svelte
+99
-16
vite.config.js
vite.config.js
+1
-1
No files found.
src/Content.svelte
View file @
ffe5503e
...
...
@@ -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
View file @
ffe5503e
...
...
@@ -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/
,
""
),
},
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment