小程序:修复页面切换卡顿 + 列表图片懒加载
- hall 大厅:5 个 tab Pane 改为懒常驻(首次进入挂载、之后 display 切换), 切换不再卸载重挂/重复请求/闪骨架,切回秒开 - mine 我的:useDidShow 刷新加 30s 节流,切 tab 回来不重复转圈 - booking/content:列表图片补 lazyLoad,滚动不再卡顿 - 重新构建 dist 产物
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 () => {
|
||||
|
||||
Reference in New Issue
Block a user