Skip to content

Commit

Permalink
Merge pull request #221 from MuxiKeStack/feat-cache
Browse files Browse the repository at this point in the history 
Feat cache
  • Loading branch information
@eleliauk
eleliauk authored Dec 25, 2024
2 parents b60ee25 + 259c0b1 commit 99a57e1
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 111 deletions.
58 changes: 24 additions & 34 deletions src/common/components/Comment/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,43 +61,33 @@ const CommentHeader: React.FC<CommentProps> = memo((props) => {

return (
<>
{!course_info ? (
<>
<View className="italic text-gray-400">加载中 ...</View>
</>
) : (
<>
<View className="classTitle" onClick={handleClickToClass}>
{course_info?.name
? `${course_info?.name} (${course_info?.teacher}) `
: '加载中 ...'}
</View>
</>
<View className="comment">
<>
<View className="classTitle" onClick={handleClickToClass}>
{`${course_info?.name} (${course_info?.teacher}) `}
<View
className="tx"
style={`background-image: url(${publisher_info?.avatar});`}
></View>
<View className="userName">{publisher_info?.nickname}</View>
<View className="time">
{' '}
{formatIsoDate(new Date(ctime as number).toISOString())}
</View>
<View className="stars">
<ShowStar score={star_rating}></ShowStar>
</View>
<Image
style={`display:${isHot ? 'block' : 'none'}`}
className="fire"
src="https://s2.loli.net/2023/11/12/2ITKRcDPMZaQCvk.png"
></Image>
</>
)}
<View className="comment">
{!publisher_info ? (
<>
<View className="italic text-gray-400">加载中 ...</View>
</>
) : (
<>
<View
className="tx"
style={`background-image: url(${publisher_info?.avatar});`}
></View>
<View className="userName">{publisher_info?.nickname}</View>
<View className="time">
{' '}
{formatIsoDate(new Date(ctime as number).toISOString())}
</View>
<View className="stars">
<ShowStar score={star_rating}></ShowStar>
</View>
<Image
style={`display:${isHot ? 'block' : 'none'}`}
className="fire"
src="https://s2.loli.net/2023/11/12/2ITKRcDPMZaQCvk.png"
></Image>
</>
)}
</View>
</>
);
Expand Down
2 changes: 1 addition & 1 deletion src/pages/classInfo/index.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export default definePageConfig({
navigationBarTitleText: '课程主页',
navigationBarBackgroundColor: '#F9F9F2',
disableScroll: true,
// disableScroll: true,
});
130 changes: 54 additions & 76 deletions src/pages/main/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable import/first */
import { Image, ScrollView, Text, View } from '@tarojs/components';
import { Image, ScrollView, Swiper, SwiperItem, Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { AtIcon } from 'taro-ui';
Expand Down Expand Up @@ -51,52 +51,17 @@ export default function Index() {
});
// 用于回到顶部
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 = (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);
console.log(deltaX, deltaY);
if (Math.abs(deltaX) > 120 && Math.abs(deltaY) < 50) {
// 判断滑动距离是否足够切换 Tab
if (deltaX > 0 && currentTab > 0) {
// 向右滑动且不是第一个 Tab
handleChangeType(tabs[currentTab - 1][0]);
} else if (deltaX < 0 && currentTab < tabs.length - 1) {
// 向左滑动且不是最后一个 Tab
handleChangeType(tabs[currentTab + 1][0]);
}
}
// 重置滑动记录
touchStartX.current = 0;
touchEndX.current = 0;
};

useEffect(() => {
void dispatch.loadMoreComments();
}, [dispatch.loadMoreComments]);
const handleScroll = (e: { detail: { scrollTop: number } }) => {
scrollTopMap.current = { ...scrollTopMap.current, [classType]: e.detail.scrollTop };
};
const handleSwiperChange = (e: { detail: { current: number } }) => {
console.log(e.detail.current);
handleChangeType(Object.keys(COURSE_NAME_MAP)[e.detail.current]);
};
const handleChangeType = (type) => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
dispatch.changeType(type);
Expand All @@ -108,7 +73,9 @@ export default function Index() {
void dispatch
.refershComments()
.then(() => {
Taro.hideLoading();
setTimeout(() => {
Taro.hideLoading();
}, 1000);
})
.catch(() => {
Taro.hideLoading();
Expand Down Expand Up @@ -140,8 +107,12 @@ export default function Index() {
const geneHandler = () => {
let timeNow = Date.now();
return (e) => {
scrollTopMap.current = {
...scrollTopMap.current,
[classType]: scrollTopMap.current[classType] + 200,
};
if (!useCourseStore.getState().loading && Date.now() - timeNow > 1000) {
void Taro.showLoading({ title: '加载中...' });
void Taro.showLoading({ title: '加载中...', mask: true });
void dispatch
.loadMoreComments()
.then(() => {
Expand Down Expand Up @@ -201,47 +172,54 @@ export default function Index() {
);
})}
</View>
<ScrollView
onTouchStart={handleTouchStart}
onTouchMove={handleTouchMove}
onTouchEnd={handleTouchEnd}
scrollWithAnimation
onScroll={handleScroll}
scrollTop={scrollTop}
scrollAnimationDuration="300"
onScrollToLower={loadMoreHandler}
lowerThreshold={200}
refresherEnabled
style={{ height: '70vh' }}
refresherTriggered={refresherTriggered}
scrollY
onRefresherRefresh={() => {
setRefresherTriggered(true);
void dispatch.refershComments().then(() => {
setRefresherTriggered(false);
});
}}
<Swiper
style={{ height: '70vh', width: '100vw' }}
current={Object.keys(COURSE_NAME_MAP).indexOf(classType)}
onChange={handleSwiperChange}
>
{comments[classType] &&
comments[classType].map((comment) => (
<>
<Comment
onCommentClick={() => handleComment({ ...comment, type: 'inner' })}
onClick={() => handleComment({ ...comment, type: 'inner' })}
key={comment.id} // 使用唯一key值来帮助React识别哪些元素是不同的
{...comment} // 展开comment对象，将属性传递给Comment组件
type="inner" // 固定属性，不需要从数组中获取
/>
<View className="h-4 w-full"></View>
</>
))}
</ScrollView>
{/* eslint-disable-next-line @typescript-eslint/no-shadow */}
{Object.entries(scrollTopMap.current).map(([name, scrollTop]) => (
<SwiperItem key={name}>
<ScrollView
onScroll={handleScroll}
onScrollToLower={loadMoreHandler}
lowerThreshold={200}
refresherEnabled
scrollTop={scrollTop}
style={{ height: '70vh' }}
refresherTriggered={refresherTriggered}
scrollY
onRefresherRefresh={() => {
setRefresherTriggered(true);
void dispatch.refershComments().then(() => {
setRefresherTriggered(false);
});
}}
>
{comments[name] &&
(comments[name] as CommentInfoType[]).map((comment) => (
<>
<Comment
onCommentClick={() => handleComment({ ...comment, type: 'inner' })}
onClick={() => handleComment({ ...comment, type: 'inner' })}
key={comment.id} // 使用唯一key值来帮助React识别哪些元素是不同的
{...comment} // 展开comment对象，将属性传递给Comment组件
type="inner" // 固定属性，不需要从数组中获取
/>
<View className="h-4 w-full"></View>
</>
))}
</ScrollView>
</SwiperItem>
))}
</Swiper>
{/* 刷新按钮 */}
<View
className="fixed bottom-[16vh] right-8 z-50 flex h-12 w-12 items-center justify-center rounded-full bg-[#FFF] shadow-lg active:opacity-80"
onClick={() => {
// 设置滚动条回到顶部
setScrollTop((prev) => (prev ? 0 : 1));
scrollTopMap.current = { ...scrollTopMap.current, [classType]: 0 };
setTimeout(() => {
setRefresherTriggered(true);
void dispatch.refershComments().then(() => {
Expand Down

0 comments on commit 99a57e1

Please sign in to comment.