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

修复 首页 畅打显示问题

Browse Source
This commit is contained in:
张成
2025-11-28 18:27:56 +08:00
parent 1bb293027d
commit eb7c9983f5
2 changed files with 29 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/ListCard/index.scss
View File

@@ -349,6 +349,7 @@
.localAreaContainer { .localAreaContainer {
display: flex; display: flex;
flex: 1;
gap: 4px; gap: 4px;
} }

49
src/components/ListCard/index.tsx
View File

@@ -59,16 +59,16 @@ const ListCard: React.FC<ListCardProps> = ({
// 处理地点截断，确保固定信息始终显示 // 处理地点截断，确保固定信息始终显示
const displayLocation = useMemo(() => { const displayLocation = useMemo(() => {
if (!location) return null; // 直接返回 null，不渲染 if (!location) return null; // 直接返回 null，不渲染
// 获取屏幕宽度，用于计算实际容器宽度 // 获取屏幕宽度，用于计算实际容器宽度
const systemInfo = Taro.getSystemInfoSync(); const systemInfo = Taro.getSystemInfoSync();
const screenWidth = systemInfo.windowWidth || 375; const screenWidth = systemInfo.windowWidth || 375;
// 容器宽度 = 屏幕宽度 - 左右 padding - 图片区域宽度 // 容器宽度 = 屏幕宽度 - 左右 padding - 图片区域宽度
const containerWidthPx = screenWidth - 130; const containerWidthPx = screenWidth - 130;
// 计算固定信息宽度 // 计算固定信息宽度
const extraInfo = `${court_type ? `・${court_type}` : ''}${distance_km ? `・${distance_km}km` : ''}`; const extraInfo = `${court_type ? `・${court_type}` : ''}${distance_km ? `・${distance_km}km` : ''}`;
// 估算字符宽度（基于 12px 字体） // 估算字符宽度（基于 12px 字体）
const getTextWidth = (text: string) => { const getTextWidth = (text: string) => {
let width = 0; let width = 0;
@@ -81,18 +81,18 @@ const ListCard: React.FC<ListCardProps> = ({
} }
return width; return width;
}; };
const extraWidth = getTextWidth(extraInfo); const extraWidth = getTextWidth(extraInfo);
const locationWidth = getTextWidth(location); const locationWidth = getTextWidth(location);
// 可用宽度 = 容器宽度 - 固定信息宽度 - 省略号宽度（18px） // 可用宽度 = 容器宽度 - 固定信息宽度 - 省略号宽度（18px）
const availableWidth = containerWidthPx - extraWidth - 18; const availableWidth = containerWidthPx - extraWidth - 18;
// 如果地点宽度小于可用宽度，不需要截断 // 如果地点宽度小于可用宽度，不需要截断
if (locationWidth <= availableWidth) { if (locationWidth <= availableWidth) {
return location; return location;
} }
// 需要截断地点 // 需要截断地点
let maxChars = 0; let maxChars = 0;
let currentWidth = 0; let currentWidth = 0;
@@ -105,7 +105,7 @@ const ListCard: React.FC<ListCardProps> = ({
currentWidth += charWidth; currentWidth += charWidth;
maxChars++; maxChars++;
} }
return location.slice(0, maxChars) + '...'; return location.slice(0, maxChars) + '...';
}, [location, court_type, distance_km]); }, [location, court_type, distance_km]);
@@ -242,22 +242,29 @@ const ListCard: React.FC<ListCardProps> = ({
{isShowSmoothPlayingGame && ( {isShowSmoothPlayingGame && (
<View className="smoothPlayingGame"> <View className="smoothPlayingGame">
<View className="smoothWrapper"> <View className="smoothWrapper">
<Image <Image
className="iconListPlayingGame" className="iconListPlayingGame"
src={require("@/static/list/changdaqiuju.png")} src={require("@/static/list/changdaqiuju.png")}
mode="widthFix" mode="widthFix"
/> />
{/* <Text className="smoothTitle">{game_type}</Text> */} {/* <Text className="smoothTitle">{game_type}</Text> */}
</View> </View>
<View className="line" /> {
<View className="localAreaContainer"> venue_description && (<View className="line" />)
<View className="localAreaTitle">场馆方:</View> }
<View className="localAreaWrapper"> {
<Image className="localArea" src={venueImage} /> venue_description &&
<Text className="localAreaText">{venue_description}</Text> (
</View>
</View> <View className="localAreaContainer">
<View className="localAreaTitle">场馆方:</View>
<View className="localAreaWrapper">
<Image className="localArea" src={venueImage} />
<Text className="localAreaText">{venue_description}</Text>
</View>
</View>
)
}
</View> </View>
)} )}
</View> </View>