小程序:修复页面切换卡顿 + 列表图片懒加载

- hall 大厅:5 个 tab Pane 改为懒常驻(首次进入挂载、之后 display 切换),
  切换不再卸载重挂/重复请求/闪骨架,切回秒开
- mine 我的:useDidShow 刷新加 30s 节流,切 tab 回来不重复转圈
- booking/content:列表图片补 lazyLoad,滚动不再卡顿
- 重新构建 dist 产物
This commit is contained in:
Pine
2026-09-08 23:13:07 +08:00
parent 2a1832eda2
commit e1d99d6cc3
4 changed files with 27 additions and 11 deletions
+1 -1
View File
@@ -66,7 +66,7 @@ export default function Booking() {
<View className="cell" key={e.id} onClick={() => goDetail(e.id)}>
<View className="cell-poster">
<Image className="cell-img" src={e.image || coverWide} mode="aspectFill"
onError={() => {}} />
lazyLoad onError={() => {}} />
<View className="cell-tags">
{e.category
? <Text className={`ev-tag${tagCls(e)}`}>{e.category}</Text>
+1 -1
View File
@@ -41,7 +41,7 @@ function CardRow({ it, go }) {
const img = it.cover_small || it.cover || (it.video ? it.video_cover : '');
return (
<View className={`ct-row ct-row--in`} onClick={() => go(it.id)}>
<Image className="ct-thumb" src={img || coverSquare} mode="aspectFill" onError={() => {}} />
<Image className="ct-thumb" src={img || coverSquare} mode="aspectFill" lazyLoad onError={() => {}} />
<View className="ct-row-bd">
<Text className="ct-tag" style={{ color: m.from }}>{m.label}</Text>
<Text className="ct-row-title">{it.title}</Text>
+15 -7
View File
@@ -51,11 +51,19 @@ export default function Hall() {
const [ttype, setTtype] = useState(''); // 人才筛选
const [wt, setWt] = useState(''); // 岗位筛选
const [topic, setTopic] = useState(''); // 社区筛选
// 懒常驻:tab 首次进入后保持挂载(display 切换),切回不重新请求、不闪骨架
const [visited, setVisited] = useState({ tasks: true });
useEffect(() => {
hallOverview().then(setStat).catch(() => {});
}, []);
const switchTab = (k) => {
if (k === tab) return;
setTab(k);
setVisited((v) => (v[k] ? v : { ...v, [k]: true }));
};
const goPublish = () => {
if (!isAuthed()) { Taro.showToast({ title: '请先登录', icon: 'none' }); return; }
const url = PUBLISH_URL[tab];
@@ -75,7 +83,7 @@ export default function Hall() {
<View className="hl-tabbar">
<View className="hl-tabs">
{TABS.map((t) => (
<Text key={t.k} className={`hl-tab${tab === t.k ? ' on' : ''}`} onClick={() => setTab(t.k)}>{t.l}</Text>
<Text key={t.k} className={`hl-tab${tab === t.k ? ' on' : ''}`} onClick={() => switchTab(t.k)}>{t.l}</Text>
))}
<View className="hl-tab-spacer" />
{PUBLISH_URL[tab] && (
@@ -90,13 +98,13 @@ export default function Hall() {
</View>
)}
</View>
{/* 内容区独立滚动 */}
{/* 内容区独立滚动;Pane 懒常驻:首次进入挂载后保持 display 切换,避免切 tab 重请求/闪骨架 */}
<ScrollView className="hl-scroll" scrollY enhanced showScrollbar={false}>
{tab === 'tasks' && <TasksPane mode={mode} onMode={setMode} />}
{tab === 'talents' && <TalentsPane ttype={ttype} onTtype={setTtype} />}
{tab === 'jobs' && <JobsPane wt={wt} onWt={setWt} />}
{tab === 'services' && <ServicesPane />}
{tab === 'community' && <CommunityPane topic={topic} onTopic={setTopic} />}
{visited.tasks && <View style={{ display: tab === 'tasks' ? 'block' : 'none' }}><TasksPane mode={mode} onMode={setMode} /></View>}
{visited.talents && <View style={{ display: tab === 'talents' ? 'block' : 'none' }}><TalentsPane ttype={ttype} onTtype={setTtype} /></View>}
{visited.jobs && <View style={{ display: tab === 'jobs' ? 'block' : 'none' }}><JobsPane wt={wt} onWt={setWt} /></View>}
{visited.services && <View style={{ display: tab === 'services' ? 'block' : 'none' }}><ServicesPane /></View>}
{visited.community && <View style={{ display: tab === 'community' ? 'block' : 'none' }}><CommunityPane topic={topic} onTopic={setTopic} /></View>}
<View className="hl-scroll-pad" />
</ScrollView>
</View>
+10 -2
View File
@@ -1,6 +1,6 @@
import { View, Text, Button, Input, Image, ScrollView } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useState, useEffect } from 'react';
import { useState, useEffect, useRef } from 'react';
import { useTabIndex } from '@/utils/tab';
import { isAuthed, getUser, logout, wxLogin, phoneLogin, bindPhone, sendCode, wxPhoneBind, updateProfile, getMe } from '@/utils/auth';
import { getMyBookings, parseIso } from '@/utils/booking';
@@ -57,7 +57,15 @@ export default function Mine() {
} catch { /* 保留上次列表,避免重进闪空 */ }
finally { setLoaded(true); }
};
Taro.useDidShow(() => { refresh(); });
// 切 tab 回来 30s 内不重复拉取(首次必刷),避免"我的"每次进入都转圈
const lastRefreshAt = useRef(0);
Taro.useDidShow(() => {
const now = Date.now();
if (now - lastRefreshAt.current > 30000) {
lastRefreshAt.current = now;
refresh();
}
});
/* 微信一键登录 */
const onWxLogin = async () => {