From f7363105df3b0ba09a9b9e5d755479c543ad888e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E6=97=A0=E6=95=8C=E6=95=B0=E7=A0=81?= =?UTF-8?q?=E6=9A=B4=E9=BE=99=E6=88=98=E5=A3=AB?= <1845519693@qq.com> Date: Wed, 25 Dec 2024 12:02:16 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=9B=9E?= =?UTF-8?q?=E5=88=B0=E9=A1=B6=E9=83=A8=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/main/index.tsx | 63 ++++++++++++++++++++++++++++++---------- 1 file changed, 48 insertions(+), 15 deletions(-) diff --git a/src/pages/main/index.tsx b/src/pages/main/index.tsx index a8806c9..a1b7e44 100644 --- a/src/pages/main/index.tsx +++ b/src/pages/main/index.tsx @@ -3,6 +3,7 @@ import { Image, ScrollView, Text, View } from '@tarojs/components'; import Taro from '@tarojs/taro'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import { AtIcon } from 'taro-ui'; import './index.scss'; @@ -41,23 +42,41 @@ export default function Index() { changeType, }) ); + // 存储每个tab的scrollTop + const scrollTopMap = useRef({ + [COURSE_TYPE.ANY]: 0, + [COURSE_TYPE.MAJOR]: 0, + [COURSE_TYPE.GENERAL_ELECT]: 0, + [COURSE_TYPE.GENERAL_CORE]: 0, + }); + // 用于回到顶部 + const [scrollTop, setScrollTop] = useState(0); + // 用于监听横向滚动 const touchStartX = useRef(0); // 记录触摸起始点 const touchEndX = useRef(0); // 记录触摸结束点 + const touchStartY = useRef(0); // 记录触摸起始点 + const touchEndY = useRef(0); // 记录触摸结束点 const handleTouchStart = (e) => { //eslint-disable-next-line @typescript-eslint/no-unsafe-member-access touchStartX.current = e?.touches[0].pageX as number; // 记录起始触摸点 + //eslint-disable-next-line @typescript-eslint/no-unsafe-member-access + touchStartY.current = e?.touches[0].pageY as number; // 记录起始触摸点 }; const handleTouchMove = (e) => { //eslint-disable-next-line @typescript-eslint/no-unsafe-member-access touchEndX.current = e?.touches[0].pageX as number; // 实时记录滑动点 + //eslint-disable-next-line @typescript-eslint/no-unsafe-member-access + touchEndY.current = e?.touches[0].pageY as number; // 实时记录滑动点 }; - const handleTouchEnd = () => { + const handleTouchEnd = (e) => { const deltaX = touchEndX.current - touchStartX.current; // 计算滑动距离 + const deltaY = touchEndY.current - touchStartY.current; const tabs = Object.entries(COURSE_NAME_MAP); const currentTab = tabs.findIndex(([name, value]) => name === classType); - if (Math.abs(deltaX) > 50) { + console.log(deltaX, deltaY); + if (Math.abs(deltaX) > 80 && Math.abs(deltaY) < 50) { // 判断滑动距离是否足够切换 Tab if (deltaX > 0 && currentTab > 0) { // 向右滑动且不是第一个 Tab @@ -75,11 +94,13 @@ export default function Index() { useEffect(() => { void dispatch.loadMoreComments(); }, [dispatch.loadMoreComments]); - + const handleScroll = (e: { detail: { scrollTop: number } }) => { + scrollTopMap.current = { ...scrollTopMap.current, [classType]: e.detail.scrollTop }; + }; const handleChangeType = (type) => { // eslint-disable-next-line @typescript-eslint/no-unsafe-argument dispatch.changeType(type); - void dispatch.refershComments(); + setScrollTop(scrollTopMap.current[type as string] as number); }; useEffect(() => { if (!comments[classType].length) { @@ -119,16 +140,7 @@ export default function Index() { const geneHandler = () => { let timeNow = Date.now(); return (e) => { - console.log(e); - - if ( - !useCourseStore.getState().loading && - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access - e.detail.scrollTop > e.detail.scrollHeight / 2 && - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access - e.detail.deltaY < 0 && - Date.now() - timeNow > 1000 - ) { + if (!useCourseStore.getState().loading && Date.now() - timeNow > 1000) { void Taro.showLoading({ title: '加载中...' }); void dispatch .loadMoreComments() @@ -193,11 +205,16 @@ export default function Index() { onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd} + scrollWithAnimation + onScroll={handleScroll} + scrollTop={scrollTop} + scrollAnimationDuration="300" + onScrollToLower={loadMoreHandler} + lowerThreshold={200} refresherEnabled style={{ height: '70vh' }} refresherTriggered={refresherTriggered} scrollY - onScroll={(e) => loadMoreHandler(e)} onRefresherRefresh={() => { setRefresherTriggered(true); void dispatch.refershComments().then(() => { @@ -219,6 +236,22 @@ export default function Index() { ))} + {/* 刷新按钮 */} + { + // 设置滚动条回到顶部 + setScrollTop((prev) => (prev ? 0 : 1)); + setTimeout(() => { + setRefresherTriggered(true); + void dispatch.refershComments().then(() => { + setRefresherTriggered(false); + }); + }, 600); + }} + > + + ); } From c63f4de8db70e3499b3e891e2b76a957e48d2a6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E6=97=A0=E6=95=8C=E6=95=B0=E7=A0=81?= =?UTF-8?q?=E6=9A=B4=E9=BE=99=E6=88=98=E5=A3=AB?= <1845519693@qq.com> Date: Wed, 25 Dec 2024 12:06:19 +0800 Subject: [PATCH 2/3] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9=E9=A6=96?= =?UTF-8?q?=E9=A1=B5=E5=88=87=E6=8D=A2tab=E7=81=B5=E6=95=8F=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/main/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/main/index.tsx b/src/pages/main/index.tsx index a1b7e44..bde94d3 100644 --- a/src/pages/main/index.tsx +++ b/src/pages/main/index.tsx @@ -76,7 +76,7 @@ export default function Index() { const tabs = Object.entries(COURSE_NAME_MAP); const currentTab = tabs.findIndex(([name, value]) => name === classType); console.log(deltaX, deltaY); - if (Math.abs(deltaX) > 80 && Math.abs(deltaY) < 50) { + if (Math.abs(deltaX) > 120 && Math.abs(deltaY) < 50) { // 判断滑动距离是否足够切换 Tab if (deltaX > 0 && currentTab > 0) { // 向右滑动且不是第一个 Tab From cea66101ff095766af97dfb494ba410414cd56f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E6=97=A0=E6=95=8C=E6=95=B0=E7=A0=81?= =?UTF-8?q?=E6=9A=B4=E9=BE=99=E6=88=98=E5=A3=AB?= <1845519693@qq.com> Date: Wed, 25 Dec 2024 13:32:45 +0800 Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E9=A6=96?= =?UTF-8?q?=E9=A1=B5=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/components/Comment/style.scss | 12 +++++++----- .../components/SearchInput/SearchInput.scss | 18 ++++++++---------- .../components/SearchInput/SearchInput.tsx | 3 +-- src/pages/main/index.scss | 8 ++++---- src/pages/main/index.tsx | 2 +- src/pages/research/research.scss | 19 +++++++------------ src/pages/research/research.tsx | 18 ++++++++++-------- 7 files changed, 38 insertions(+), 42 deletions(-) diff --git a/src/common/components/Comment/style.scss b/src/common/components/Comment/style.scss index 6040d04..154f56b 100644 --- a/src/common/components/Comment/style.scss +++ b/src/common/components/Comment/style.scss @@ -109,10 +109,10 @@ $content-line-height: 30; Segoe UI-Regular, Segoe UI; font-weight: 400; - line-height: calc(#{$content-line-height}rpx); + line-height: calc(#{$content-line-height + 6}rpx); color: #565552; margin: 30rpx 0; - height: calc(#{$content-line-height}rpx); + // height: calc(#{$content-line-height}rpx); overflow: hidden; } .likes { @@ -150,11 +150,13 @@ $content-line-height: 30; } } .text-overflow { + line-clamp: 3; + -webkit-box-orient: vertical; display: -webkit-box; - -webkit-line-clamp: 1; - line-clamp: 1; + -webkit-line-clamp: 3; //多行在这里修改数字即可 + overflow: hidden; + /* autoprefixer: ignore next */ -webkit-box-orient: vertical; - /*! autoprefixer: off */ } .text-showAll { height: auto !important; diff --git a/src/common/components/SearchInput/SearchInput.scss b/src/common/components/SearchInput/SearchInput.scss index dbb1ebf..2b21328 100644 --- a/src/common/components/SearchInput/SearchInput.scss +++ b/src/common/components/SearchInput/SearchInput.scss @@ -1,17 +1,15 @@ .searchInput { - left: 79.71rpx; - top: 80rpx; - position: relative; - background-color: black; background-color: #f9f9f2; - width: 592.39rpx; - height: 108.7rpx; + width: 80vw; + height: 4vh; border-radius: 18.12rpx 18.12rpx 18.12rpx 18.12rpx; - padding-left: 27.17rpx; + padding: 4vw; } .search { - left: 614.13rpx; - top: 11.67rpx; - position: relative; + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 4vw; z-index: 999; + display: flex; } diff --git a/src/common/components/SearchInput/SearchInput.tsx b/src/common/components/SearchInput/SearchInput.tsx index a9239e0..3d63855 100644 --- a/src/common/components/SearchInput/SearchInput.tsx +++ b/src/common/components/SearchInput/SearchInput.tsx @@ -53,9 +53,8 @@ const SearchInput: React.FC = ({ // ...组件的其余部分 return ( - + ) : ( - + { return ( { handleClick(); }} @@ -124,13 +124,15 @@ const ConditionalRender = ({ isSpread, classes, hrs, handleSearch }) => { ))} ) : ( - - 历史搜索 - - + + + 历史搜索 + + +