添加选择过度

This commit is contained in:
张成
2025-11-09 23:29:17 +08:00
parent 9801968af2
commit 649898e346
3 changed files with 24 additions and 7 deletions

View File

@@ -206,13 +206,12 @@ box-sizing: border-box;
font-weight: bold; font-weight: bold;
line-height: 1; line-height: 1;
transform: rotate(45deg); transform: rotate(45deg);
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
} }
&.rotated { &.rotated {
.closeIcon{ .closeIcon{
transform: rotate(90deg); transform: rotate(90deg);
} }
} }
} }

View File

@@ -19,6 +19,7 @@ interface IProps {
leftIconClick?: () => void; leftIconClick?: () => void;
}; };
onCityPickerVisibleChange?: (visible: boolean) => void; // 城市选择器显示/隐藏回调 onCityPickerVisibleChange?: (visible: boolean) => void; // 城市选择器显示/隐藏回调
onScrollToTop?: () => void; // 滚动到顶部回调
} }
function CityPicker(props) { function CityPicker(props) {
@@ -50,7 +51,7 @@ function CityPicker(props) {
} }
const ListHeader = (props: IProps) => { const ListHeader = (props: IProps) => {
const { config, onCityPickerVisibleChange } = props; const { config, onCityPickerVisibleChange, onScrollToTop } = props;
const { showInput = false, inputLeftIcon, leftIconClick } = config || {}; const { showInput = false, inputLeftIcon, leftIconClick } = config || {};
const { getLocationLoading, statusNavbarHeightInfo } = useGlobalState(); const { getLocationLoading, statusNavbarHeightInfo } = useGlobalState();
const { gamesNum, searchValue, cities, area, updateArea, getMatchesData, fetchGetGamesCount, refreshBothLists } = useListState(); const { gamesNum, searchValue, cities, area, updateArea, getMatchesData, fetchGetGamesCount, refreshBothLists } = useListState();
@@ -89,10 +90,16 @@ const ListHeader = (props: IProps) => {
const handleLogoClick = () => { const handleLogoClick = () => {
// 如果当前在列表页,点击后页面回到顶部 // 如果当前在列表页,点击后页面回到顶部
if (getCurrentFullPath() === "/game_pages/list/index") { if (getCurrentFullPath() === "/game_pages/list/index") {
Taro.pageScrollTo({ // 使用父组件传递的滚动方法(适配 ScrollView
scrollTop: 0, if (onScrollToTop) {
duration: 300, onScrollToTop();
}); } else {
// 降级方案:使用页面滚动(兼容旧版本)
Taro.pageScrollTo({
scrollTop: 0,
duration: 300,
});
}
} }
Taro.redirectTo({ Taro.redirectTo({
url: "game_pages/list/index", // 列表页 url: "game_pages/list/index", // 列表页

View File

@@ -63,6 +63,7 @@ const ListPage = () => {
// 滚动相关状态 // 滚动相关状态
const scrollContextRef = useRef(null); const scrollContextRef = useRef(null);
const scrollViewRef = useRef(null); // ScrollView 的 ref
const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null); const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const lastScrollTopRef = useRef(0); const lastScrollTopRef = useRef(0);
const scrollDirectionRef = useRef<'up' | 'down' | null>(null); const scrollDirectionRef = useRef<'up' | 'down' | null>(null);
@@ -70,6 +71,7 @@ const ListPage = () => {
const loadingMoreRef = useRef(false); // 防止重复加载更多 const loadingMoreRef = useRef(false); // 防止重复加载更多
const scrollStartPositionRef = useRef(0); // 记录开始滚动的位置 const scrollStartPositionRef = useRef(0); // 记录开始滚动的位置
const [showSearchBar, setShowSearchBar] = useState(true); // 控制搜索框显示/隐藏(筛选始终显示) const [showSearchBar, setShowSearchBar] = useState(true); // 控制搜索框显示/隐藏(筛选始终显示)
const [scrollTop, setScrollTop] = useState(0); // 控制 ScrollView 滚动位置
// 动态控制 GuideBar 的 z-index // 动态控制 GuideBar 的 z-index
const [guideBarZIndex, setGuideBarZIndex] = useState<'low' | 'high'>('high'); const [guideBarZIndex, setGuideBarZIndex] = useState<'low' | 'high'>('high');
@@ -92,6 +94,12 @@ const ListPage = () => {
setIsCityPickerVisible(visible); setIsCityPickerVisible(visible);
}, []); }, []);
// 滚动到顶部的方法
const scrollToTop = useCallback(() => {
// 使用一个唯一值触发 scrollTop 更新,确保每次都能滚动到顶部
setScrollTop(prev => prev === 0 ? 0.1 : 0);
}, []);
// 监听所有弹窗和菜单的状态,动态调整 GuideBar 的 z-index // 监听所有弹窗和菜单的状态,动态调整 GuideBar 的 z-index
useEffect(() => { useEffect(() => {
if (isPublishMenuVisible) { if (isPublishMenuVisible) {
@@ -432,6 +440,7 @@ const ListPage = () => {
showInput: isShowInputCustomerNavBar, showInput: isShowInputCustomerNavBar,
}} }}
onCityPickerVisibleChange={handleCityPickerVisibleChange} onCityPickerVisibleChange={handleCityPickerVisibleChange}
onScrollToTop={scrollToTop}
/> />
{area_city !== "上海" ? ( {area_city !== "上海" ? (
renderCityQrcode() renderCityQrcode()
@@ -485,7 +494,9 @@ const ListPage = () => {
{/* 可滚动的列表内容 */} {/* 可滚动的列表内容 */}
<ScrollView <ScrollView
ref={scrollViewRef}
scrollY scrollY
scrollTop={scrollTop}
className={styles.listScrollView} className={styles.listScrollView}
scrollWithAnimation scrollWithAnimation
enhanced enhanced