bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 定位到组件异常渲染的问题

Browse Source
This commit is contained in:
刘杰
2025-11-15 20:23:15 +08:00
parent d427b9323c
commit 2a8c337b72
6 changed files with 251 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/main_pages/components/ListPageContent.tsx
View File

@@ -36,9 +36,10 @@ const ListPageContent: React.FC<ListPageContentProps> = ({
}) => {
const store = useListStore() || {};
const { fetchUserInfo } = useUserActions();
const { statusNavbarHeightInfo, getCurrentLocationInfo } = useGlobalState() || {};
const { statusNavbarHeightInfo, getCurrentLocationInfo } =
useGlobalState() || {};
const { totalHeight = 98 } = statusNavbarHeightInfo || {};
const {
listPageState,
loading,
@@ -77,7 +78,7 @@ const ListPageContent: React.FC<ListPageContentProps> = ({
const scrollViewRef = useRef(null);
const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const lastScrollTopRef = useRef(0);
const scrollDirectionRef = useRef<'up' | 'down' | null>(null);
const scrollDirectionRef = useRef<"up" | "down" | null>(null);
const lastScrollTimeRef = useRef(Date.now());
const loadingMoreRef = useRef(false);
const scrollStartPositionRef = useRef(0);
@@ -86,17 +87,20 @@ const ListPageContent: React.FC<ListPageContentProps> = ({
const [refreshing, setRefreshing] = useState(false);
// 处理距离筛选显示/隐藏
const handleDistanceFilterVisibleChange = useCallback((visible: boolean) => {
onDistanceFilterVisibleChange?.(visible);
onNavStateChange?.({ isDistanceFilterVisible: visible });
}, [onDistanceFilterVisibleChange, onNavStateChange]);
const handleDistanceFilterVisibleChange = useCallback(
(visible: boolean) => {
onDistanceFilterVisibleChange?.(visible);
onNavStateChange?.({ isDistanceFilterVisible: visible });
},
[onDistanceFilterVisibleChange, onNavStateChange]
);
// 处理城市选择器显示/隐藏（由主容器统一管理，通过 onNavStateChange 通知）
// 注意：CustomerNavBar 的 onCityPickerVisibleChange 由主容器直接处理
// 滚动到顶部（用于 ScrollView 内部滚动）
const scrollToTopInternal = useCallback(() => {
setScrollTop(prev => prev === 0 ? 0.1 : 0);
setScrollTop((prev) => (prev === 0 ? 0.1 : 0));
}, []);
// 监听外部滚动触发
@@ -120,24 +124,30 @@ const ListPageContent: React.FC<ListPageContentProps> = ({
let newDirection = scrollDirectionRef.current;
if (Math.abs(scrollDiff) > 15) {
if (scrollDiff > 0) {
if (newDirection !== 'up') {
if (newDirection !== "up") {
scrollStartPositionRef.current = lastScrollTop;
}
newDirection = 'up';
newDirection = "up";
} else {
if (newDirection !== 'down') {
if (newDirection !== "down") {
scrollStartPositionRef.current = lastScrollTop;
}
newDirection = 'down';
newDirection = "down";
}
scrollDirectionRef.current = newDirection;
}
const totalScrollDistance = Math.abs(currentScrollTop - scrollStartPositionRef.current);
const totalScrollDistance = Math.abs(
currentScrollTop - scrollStartPositionRef.current
);
const positionThreshold = 120;
const distanceThreshold = 80;
if (newDirection === 'up' && currentScrollTop > positionThreshold && totalScrollDistance > distanceThreshold) {
if (
newDirection === "up" &&
currentScrollTop > positionThreshold &&
totalScrollDistance > distanceThreshold
) {
if (showSearchBar || !isShowInputCustomerNavBar) {
setShowSearchBar(false);
updateListPageState({
@@ -146,7 +156,10 @@ const ListPageContent: React.FC<ListPageContentProps> = ({
onNavStateChange?.({ isShowInputCustomerNavBar: true });
scrollStartPositionRef.current = currentScrollTop;
}
} else if ((newDirection === 'down' && totalScrollDistance > distanceThreshold) || currentScrollTop <= positionThreshold) {
} else if (
(newDirection === "down" && totalScrollDistance > distanceThreshold) ||
currentScrollTop <= positionThreshold
) {
if (!showSearchBar || isShowInputCustomerNavBar) {
setShowSearchBar(true);
updateListPageState({
@@ -160,7 +173,12 @@ const ListPageContent: React.FC<ListPageContentProps> = ({
lastScrollTopRef.current = currentScrollTop;
lastScrollTimeRef.current = currentTime;
},
[showSearchBar, isShowInputCustomerNavBar, updateListPageState, onNavStateChange]
[
showSearchBar,
isShowInputCustomerNavBar,
updateListPageState,
onNavStateChange,
]
);
useEffect(() => {
@@ -253,7 +271,7 @@ const ListPageContent: React.FC<ListPageContentProps> = ({
updateFilterOptions(params);
};
const handleSearchChange = () => { };
const handleSearchChange = () => {};
const handleDistanceOrQuickChange = (name, value) => {
updateDistanceQuickFilter({
@@ -341,7 +359,11 @@ const ListPageContent: React.FC<ListPageContentProps> = ({
</View>
)}
<View className={styles.fixedHeader}>
<View className={`${styles.listTopSearchWrapper} ${showSearchBar ? styles.show : styles.hide}`}>
<View
className={`${styles.listTopSearchWrapper} ${
showSearchBar ? styles.show : styles.hide
}`}
>
<SearchBar
handleFilterIcon={toggleShowPopup}
isSelect={filterCount > 0}
@@ -378,7 +400,11 @@ const ListPageContent: React.FC<ListPageContentProps> = ({
onRefresherRefresh={handleRefresh}
lowerThreshold={100}
onScrollToLower={async () => {
if (!loading && !loadingMoreRef.current && listPageState?.isHasMoreData) {
if (
!loading &&
!loadingMoreRef.current &&
listPageState?.isHasMoreData
) {
loadingMoreRef.current = true;
try {
await loadMoreMatches();
@@ -399,6 +425,7 @@ const ListPageContent: React.FC<ListPageContentProps> = ({
error={error}
reload={refreshMatches}
loadMoreMatches={loadMoreMatches}
evaluateFlag
/>
</ScrollView>
</View>
@@ -409,4 +436,3 @@ const ListPageContent: React.FC<ListPageContentProps> = ({
};
export default ListPageContent;