![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/01\/20260114091720-69675f20df88e.png\")
<\/p>\n<\/p>\n
\u6700\u8fd1\u5728\u5b9e\u9645\u5f00\u53d1\u4e2d \u505a\u4e86\u4e00\u4e2a\u5c0f\u8bf4\u5b98\u7f51\u00a0<\/p>\n
\u9700\u8981\u6709\u4e2a\u5206\u9875\u7684\u529f\u80fd<\/p>\n
\u4e00\u76f4\u5f80\u4e0b\u6ed1 \u77e5\u9053\u6ca1\u6709\u6570\u636e\u4e3a\u6b62\u3002\u8fd9\u6837\u7684\u5b98\u7f51\u8ddfh5 \u5c0f\u7a0b\u5e8f\u4e0d\u4e00\u6837 \u53ef\u4ee5\u6709scroll-view \u7ec4\u4ef6<\/p>\n
\u53ef\u4ee5\u76f4\u63a5\u6709\u5206\u914d\u7684\u6ed1\u52a8\u5e95\u90e8\u51fd\u6570 top \u53c2\u6570\u7b49<\/p>\n
\u6211\u4eec\u53ef\u4ee5\u76d1\u542cwindow \u65f6\u95f4\u6765\u5b9e\u73b0<\/p>\n
onUnmounted(() => {
\n\/\/ \u6e05\u7406\u9632\u6296\u8ba1\u65f6\u5668
\nif (scrollTimer) {
\nclearTimeout(scrollTimer);
\n}<\/p>\n
\/\/ \u79fb\u9664\u7a97\u53e3\u6eda\u52a8\u76d1\u542c
\nwindow.removeEventListener('scroll', handleWindowScroll);
\n});<\/p>\n
onMounted(() => {
\ngetBookList();
\nwindow.addEventListener('scroll', handleWindowScroll);
\nsetTimeout(() => {
\nhandleWindowScroll();
\n}, 500);
\n});<\/p>\n
\u5f53\u7136 \u6211\u4eec\u8fd9\u4e2a\u9700\u8981\u6709\u9632\u6296 \u4e0d\u7136\u592a\u9891\u7e41\u4e86<\/p>\n
const handleWindowScroll = () => {
\n\/\/ \u9632\u6296\u5904\u7406
\nif (scrollTimer) {
\nclearTimeout(scrollTimer);
\n}<\/p>\n
scrollTimer = setTimeout(() => {
\n\/\/ \u83b7\u53d6\u6eda\u52a8\u4f4d\u7f6e
\nconst scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
\nconst windowHeight = window.innerHeight;
\nconst documentHeight = document.documentElement.scrollHeight;<\/p>\n
\/\/ \u8ba1\u7b97\u8ddd\u79bb\u5e95\u90e8\u7684\u8ddd\u79bb
\nconst distanceToBottom = documentHeight – scrollTop – windowHeight;<\/p>\n
console.log('\u6eda\u52a8\u68c0\u6d4b:', {
\nscrollTop,
\nwindowHeight,
\ndocumentHeight,
\ndistanceToBottom,
\n\u662f\u5426\u89e6\u5e95: distanceToBottom < 100,
\n});<\/p>\n
\/\/ \u663e\u793a\/\u9690\u85cf\u89e6\u5e95\u63d0\u793a
\nshowBottomHint.value = distanceToBottom < 300 && distanceToBottom > 50;<\/p>\n
\/\/ \u8ddd\u79bb\u5e95\u90e8100px\u65f6\u89e6\u53d1\u52a0\u8f7d
\nif (distanceToBottom < 100 && !loading.value && !noMoreData.value) {
\nconsole.log('\u89e6\u53d1\u52a0\u8f7d\u66f4\u591a，\u5f53\u524d\u9875\u7801:', searchParams.value.pageIndex);
\nloadMore();
\n}
\n}, 200);
\n};<\/p>\n
\u8fd9\u4e2a\u8ddd\u79bb\u5e95\u90e8\u7684\u8ddd\u79bb\u5c31\u662f \u9700\u8981\u6839\u636e\u9875\u9762\u7684\u9ad8\u5ea6\u8ba1\u7b97\u4e00\u4e0b \u76ee\u524d\u8ddd\u79bb\u5e95\u90e8\u7684\u8ddd\u79bb\u00a0<\/p>\n
\u6765\u8ba1\u7b97\u662f\u5426\u89e6\u5e95\u4e86 \u7136\u540e\u6211\u4eec\u8fdb\u884c\u5bf9 page \u7684 ++<\/p>\n
\u7136\u540e\u8c03\u7528\u63a5\u53e3<\/p>\n
\u8fdb\u884c\u4e0b\u4e00\u9875<\/p>\n
\u5f53\u7136 \u4e5f\u6709\u53ef\u80fd \u53ea\u6709\u4e00\u4e2a\u6570\u636e\u00a0<\/p>\n
\u6211\u4eec\u53ef\u4ee5\u5728\u4e00\u5f00\u59cb\u5c31\u8c03\u7528\u8fd9\u4e2a\u51fd\u6570 \u8fdb\u884c\u5224\u65ad \u662f\u5426\u9700\u8981\u52a0\u8f7d\u66f4\u591a<\/p>\n
\u6211\u628a\u6574\u4e2a\u4ee3\u7801\u8d34\u4e00\u4e0b<\/p>\n
\u5927\u5bb6\u5982\u679c\u9047\u5230\u76f8\u540c\u7684\u9700\u6c42\u53ef\u76f4\u63a5\u62ff\u53bb\u7528<\/p>\n
<template>
\n<div class="categorypage-container">
\n<div class="header-title">
\n<span class="t1" @click="router.push('\/')">\u9996\u9875<\/span>
\n<span class="t2"> > <\/span>
\n<span class="t3">{{ queryInfo.categoryName }}\u5c0f\u8bf4<\/span>
\n<\/div>
\n<div class="book-list-container">
\n<div @click="bookDetails" class="book-item" v-for="item in list" :key="item.novelID">
\n<div class="left-line"><\/div>
\n<img :src="item.coverUrl" class="img" alt="" \/>
\n<div class="highlight"><\/div><\/p>\n
<div class="bookName text-row-1">{{ item.novelName }}<\/div>
\n<div class="author text-row-1">{{ item.authorName }}\/\u8457<\/div>
\n<div class="desc text-row-2">
\n{{ item.novelSummary }}
\n<\/div>
\n<\/div>
\n<\/div>
\n<div v-if="loading" class="loading">
\n<span>\u52a0\u8f7d\u4e2d…<\/span>
\n<\/div><\/p>\n
<!– \u6ca1\u6709\u66f4\u591a\u6570\u636e –>
\n<div v-if="noMoreData" class="no-more">
\n<span>\u6ca1\u6709\u66f4\u591a\u4e66\u7c4d\u4e86～<\/span>
\n<\/div>
\n<\/div>
\n<\/template><\/p>\n
<script setup>
\nimport { ref, reactive, onMounted, onUnmounted } from 'vue';
\nimport { useRouter, useRoute } from 'vue-router';
\nimport { useHomeApi } from '\/@\/api\/home\/index';
\nconst { getBookListByCategory } = useHomeApi();<\/p>\n
const route = useRoute();
\nconst router = useRouter();<\/p>\n
const queryInfo = ref({});
\nqueryInfo.value = route.query;
\nconst containerRef = ref(null);<\/p>\n
const list = ref([
\n]);
\nconst searchParams = ref({
\ncategory: route.query.id,
\npageIndex: 1,
\npageSize: 20,
\ntotal: 0,
\n});
\nconst loading = ref(false);
\nconst noMoreData = ref(false);
\nconst showBottomHint = ref(false); \/\/ \u89e6\u5e95\u63d0\u793a<\/p>\n
let scrollTimer = null;
\n\/\/\u6ed1\u52a8\u5230\u5e95\u90e8
\n\/\/ \u76d1\u542c\u7a97\u53e3\u6eda\u52a8
\nconst handleWindowScroll = () => {
\n\/\/ \u9632\u6296\u5904\u7406
\nif (scrollTimer) {
\nclearTimeout(scrollTimer);
\n}<\/p>\n
scrollTimer = setTimeout(() => {
\n\/\/ \u83b7\u53d6\u6eda\u52a8\u4f4d\u7f6e
\nconst scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
\nconst windowHeight = window.innerHeight;
\nconst documentHeight = document.documentElement.scrollHeight;<\/p>\n
\/\/ \u8ba1\u7b97\u8ddd\u79bb\u5e95\u90e8\u7684\u8ddd\u79bb
\nconst distanceToBottom = documentHeight – scrollTop – windowHeight;<\/p>\n
console.log('\u6eda\u52a8\u68c0\u6d4b:', {
\nscrollTop,
\nwindowHeight,
\ndocumentHeight,
\ndistanceToBottom,
\n\u662f\u5426\u89e6\u5e95: distanceToBottom < 100,
\n});<\/p>\n
\/\/ \u663e\u793a\/\u9690\u85cf\u89e6\u5e95\u63d0\u793a
\nshowBottomHint.value = distanceToBottom < 300 && distanceToBottom > 50;<\/p>\n
\/\/ \u8ddd\u79bb\u5e95\u90e8100px\u65f6\u89e6\u53d1\u52a0\u8f7d
\nif (distanceToBottom < 100 && !loading.value && !noMoreData.value) {
\nconsole.log('\u89e6\u53d1\u52a0\u8f7d\u66f4\u591a，\u5f53\u524d\u9875\u7801:', searchParams.value.pageIndex);
\nloadMore();
\n}
\n}, 200);
\n};
\n\/\/ \u52a0\u8f7d\u66f4\u591a\u6570\u636e
\nconst loadMore = async () => {
\nif (loading.value || noMoreData.value) {
\nreturn;
\n}<\/p>\n
loading.value = true;<\/p>\n
try {
\n\/\/ \u589e\u52a0\u9875\u7801
\nconst nextPage = searchParams.value.pageIndex + 1;<\/p>\n
const result = await getBookListByCategory({
\n…searchParams.value,
\npageIndex: nextPage,
\n});<\/p>\n
console.log('\u52a0\u8f7d\u7ed3\u679c:', result);<\/p>\n
if (result.code == 200) {
\nconst newData = result.data || [];
\nconst total = result.total || 0;<\/p>\n
console.log('\u83b7\u53d6\u5230\u65b0\u6570\u636e:', newData.length, '\u6761');<\/p>\n
if (newData.length > 0) {
\n\/\/ \u66f4\u65b0\u9875\u7801
\nsearchParams.value.pageIndex = nextPage;
\n\/\/ if (uniqueNewData.length > 0) {
\nlist.value = […list.value, …newData];
\nconsole.log('\u5408\u5e76\u540e\u603b\u6570\u636e:', list.value.length);
\n\/\/ }<\/p>\n
\/\/ \u66f4\u65b0\u603b\u6570\u636e\u91cf
\nsearchParams.value.total = total;<\/p>\n
\/\/ \u68c0\u67e5\u662f\u5426\u8fd8\u6709\u66f4\u591a\u6570\u636e
\nif (list.value.length >= total) {
\nnoMoreData.value = true;
\nconsole.log('\u6ca1\u6709\u66f4\u591a\u6570\u636e\u4e86，\u603b\u6570:', total);
\n}
\n} else {
\n\/\/ \u6ca1\u6709\u65b0\u6570\u636e\u4e86
\nnoMoreData.value = true;
\nconsole.log('\u6ca1\u6709\u66f4\u591a\u6570\u636e\u4e86');
\n}
\n} else {
\nElMessage.error(result.message || '\u52a0\u8f7d\u5931\u8d25');
\n}
\n} catch (error) {
\nconsole.error('\u52a0\u8f7d\u66f4\u591a\u5931\u8d25:', error);
\nElMessage.error('\u52a0\u8f7d\u5931\u8d25');
\n} finally {
\nloading.value = false;
\n}
\n};<\/p>\n
\/\/\u83b7\u53d6\u4e66\u7c4d\u5206\u7c7b\u5217\u8868
\nconst getBookList = async () => {
\ntry {
\nconst result = await getBookListByCategory(searchParams.value);
\nconsole.log(result, 'result');
\nif (result.code == 200) {
\nlist.value = result.data || [];
\nsearchParams.value.total = result.total || 0;
\n} else {
\nElMessage.error(result.message);
\nlist.value = [];
\n}
\n} catch (error) {
\nElMessage.error('\u83b7\u53d6\u4e66\u7c4d\u5206\u7c7b\u5217\u8868\u5931\u8d25～');
\n}
\n};
\nonUnmounted(() => {
\n\/\/ \u6e05\u7406\u9632\u6296\u8ba1\u65f6\u5668
\nif (scrollTimer) {
\nclearTimeout(scrollTimer);
\n}<\/p>\n
\/\/ \u79fb\u9664\u7a97\u53e3\u6eda\u52a8\u76d1\u542c
\nwindow.removeEventListener('scroll', handleWindowScroll);
\n});<\/p>\n
onMounted(() => {
\ngetBookList();
\nwindow.addEventListener('scroll', handleWindowScroll);
\nsetTimeout(() => {
\nhandleWindowScroll();
\n}, 500);
\n});
\n<\/script><\/p>\n
<style lang="scss" scoped>
\n.categorypage-container {
\nwidth: 1200px;
\nmargin: 0 auto;
\nmargin-top: 80px;
\n\/\/ background-color: pink;
\nmin-height: 500px;
\npadding: 20px;
\nposition: relative;<\/p>\n
.header-title {
\nfont-size: 16px;
\n.t1 {
\ncursor: pointer;
\n\/\/ color:;
\n}
\n.t2 {
\nmargin: 0 4px;
\n}
\n.t3 {
\ncursor: pointer;
\ncolor: #4c62d1;
\n}
\n}
\n.loading {
\nmargin-top: 32px;
\ncolor: #999;
\ntext-align: center;
\n}
\n.no-more {
\ncolor: #999;
\nmargin-top: 32px;
\ntext-align: center;
\n}
\n.book-list-container {
\nmargin-top: 40px;
\ndisplay: flex;
\nflex-flow: row wrap;
\nwidth: 1200px;
\n.book-item {
\n\/\/ padding: 5px;<\/p>\n
width: 227px;
\nheight: auto;
\ndisplay: flex;
\nflex-direction: column;
\n\/\/ align-items: center;
\ncursor: pointer;
\ntransition: all 0.3s;
\nposition: relative;
\nz-index: 1;
\n.img {
\nwidth: 220px;
\nheight: 300px;
\n}
\n.highlight {
\nposition: absolute;
\nheight: 73%;
\nwidth: 25px; \/* \u9002\u5f53\u589e\u52a0\u5bbd\u5ea6 *\/
\ntop: 1px;
\nright: 2px;
\nbackground: rgba(223, 228, 255, 0.7);
\n\/* \u692d\u5706\u5f62\u5706\u89d2：\u6c34\u5e73\u534a\u5f84 \/ \u5782\u76f4\u534a\u5f84 *\/
\nborder-top-right-radius: 25px;
\nborder-bottom-right-radius: 25px;
\nz-index: -1;
\nbox-shadow: 1px 1px 4px rgba(76, 98, 209, 0.15);
\nfilter: blur(0.6px);
\n}<\/p>\n
&:hover {
\n.bookName {
\ncolor: #4c62d1;
\n}
\ntransform: translateY(-2px);
\nimg {
\nbox-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
\n\/\/ width: 225px;
\n}
\n\/\/ .highlight {
\n\/\/ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
\n\/\/ }
\n}
\nimg {
\nwidth: 220px;
\n\/\/ \u6574\u4f53\u6295\u5f71\u6548\u679c
\nbox-shadow: 0 0 5px rgba(0, 0, 0, 0.1); \/\/ X 0, Y 0, \u6a21\u7cca5px
\nborder-radius: 8px; \/\/ \u53ef\u9009，\u8ba9\u6295\u5f71\u66f4\u81ea\u7136
\noverflow: hidden; \/\/ \u786e\u4fdd\u5185\u5bb9\u4e0d\u8d85\u51fa\u5706\u89d2
\ntransition: all 0.3s;
\n}
\n.left-line {
\nposition: absolute;
\nheight: 75%;
\nwidth: 20px;
\ntop: 0;
\nleft: 0;
\nbackground: linear-gradient(to right, rgba(51, 51, 51, 0.9), rgba(255, 255, 255, 0.8), rgba(51, 51, 51, 0)); \/\/ \u6e10\u53d8\u8272\u5757
\nborder-bottom-left-radius: 8px;
\nborder-top-left-radius: 8px;
\nopacity: 0.25;
\n\/\/ box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
\n}
\n\/\/ .highlight-tag {
\n\/\/ position: absolute;
\n\/\/ top: 10px;
\n\/\/ left: 10px;
\n\/\/ background: linear-gradient(45deg, #ff6b6b, #ffa500); \/\/ \u6e10\u53d8\u8272\u5757
\n\/\/ color: white;
\n\/\/ padding: 4px 8px;
\n\/\/ border-radius: 4px;
\n\/\/ font-size: 12px;
\n\/\/ font-weight: bold;
\n\/\/ }<\/p>\n
.img-left {
\nposition: absolute;
\n}
\n.img-right {
\nposition: absolute;
\n}
\n.bookName {
\nfont-size: 16px;
\nfont-weight: 500;
\nmargin-top: 8px;
\n}
\n.desc {
\ncolor: #666;
\nfont-size: 14px;
\nmargin-top: 6px;
\n}
\n.author {
\ncolor: #666;
\nfont-size: 14px;
\ntext-align: left;
\nmargin-top: 6px;
\n}
\n\/\/ background-color: pink;
\n&:not(:nth-child(5n + 1)) {
\nmargin-left: 16px;
\n}<\/p>\n
\/\/ \u4ece\u7b2c6\u4e2a\u5f00\u59cb（\u7b2c\u4e8c\u884c）\u6dfb\u52a0\u9876\u90e8\u95f4\u8ddd
\n&:nth-child(n + 6) {
\nmargin-top: 16px;
\n}
\n}
\n}
\n}
\n<\/style><\/p>\n","protected":false},"excerpt":{"rendered":"
\u6700\u8fd1\u5728\u5b9e\u9645\u5f00\u53d1\u4e2d \u505a\u4e86\u4e00\u4e2a\u5c0f\u8bf4\u5b98\u7f51\u00a0\u9700\u8981\u6709\u4e2a\u5206\u9875\u7684\u529f\u80fd\u4e00\u76f4\u5f80\u4e0b\u6ed1 \u77e5\u9053\u6ca1\u6709\u6570\u636e\u4e3a\u6b62\u3002\u8fd9\u6837\u7684\u5b98\u7f51\u8ddfh5 \u5c0f\u7a0b\u5e8f\u4e0d\u4e00\u6837 \u53ef\u4ee5\u6709scroll-view \u7ec4\u4ef6\u53ef\u4ee5\u76f4\u63a5\u6709\u5206\u914d\u7684\u6ed1\u52a8\u5e95\u90e8\u51fd\u6570 top \u53c2\u6570\u7b49\u6211\u4eec\u53ef\u4ee5\u76d1\u542cwindow \u65f6\u95f4\u6765\u5b9e\u73b0onUnmounted(() > {
\n\/\/ \u6e05\u7406\u9632\u6296\u8ba1\u65f6\u5668
\nif (scrollTimer) {
\nclearTimeout(scrollTimer);
\n}\/\/ \u79fb\u9664\u7a97\u53e3\u6eda\u52a8\u76d1\u542c
\nwindow.removeEventListener(scroll, h<\/p>\n","protected":false},"author":2,"featured_media":59897,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[6326,187,458,625,87],"topic":[],"class_list":["post-59898","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-6326","tag-javascript","tag-vue","tag-vue-js","tag-87"],"yoast_head":"\n