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

1

Browse Source
This commit is contained in:
张成
2025-11-16 00:11:25 +08:00
parent 2ac337a2ad
commit 6f4900eb0b
4 changed files with 151 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/game_pages/search/index.scss
View File

@@ -17,7 +17,7 @@
gap: 10px;
border-radius: 999px;
border: 0.5px solid rgba(0, 0, 0, 0.06);
background: #FFF;
// background: #FFF;
box-shadow: 0px 4px 48px 0px rgba(0, 0, 0, 0.08);
.nut-input {

129
src/game_pages/search/index.tsx
View File

@@ -1,4 +1,4 @@
import { View, Image, Text } from "@tarojs/components";
import { View, Image, Text, ScrollView } from "@tarojs/components";
import { Input } from "@nutui/nutui-react-taro";
import { useEffect, useMemo, useRef } from "react";
import { useListState } from "@/store/listStore";
@@ -125,9 +125,9 @@ const ListSearch = () => {
/>
<View
className="listSearchContainer"
style={{ paddingTop: `${totalHeight + 10}px` }}
style={{ paddingTop: `${totalHeight}px` }}
>
{/* 搜索 */}
{/* 搜索框 - 固定在顶部 */}
<View className="topSearch">
<Image className="searchIcon" src={img.ICON_LIST_SEARCH_SEARCH} />
<Input
@@ -154,72 +154,81 @@ const ListSearch = () => {
</Text>
</View>
</View>
{/* 联想词 */}
{isShowSuggestion && (
<View className="searchSuggestion">
{(suggestionList || [])?.map((item) => {
// 替换匹配文本为高亮版本
const highlightedText = item.replace(regex, (match) => {
// 如果匹配不到，则返回原文本
if (!match) return match;
return `<Text class="highlight">${match}</Text>`;
});
return (
<View
className="searchSuggestionItem"
onClick={() => handleSuggestionSearch(item)}
>
<View className="searchSuggestionItemLeft">
{/* 中间内容区域 - 可滚动 */}
<ScrollView
scrollY
className="searchContentScroll"
enhanced
showScrollbar={false}
>
{/* 联想词 */}
{isShowSuggestion && (
<View className="searchSuggestion">
{(suggestionList || [])?.map((item) => {
// 替换匹配文本为高亮版本
const highlightedText = item.replace(regex, (match) => {
// 如果匹配不到，则返回原文本
if (!match) return match;
return `<Text class="highlight">${match}</Text>`;
});
return (
<View
className="searchSuggestionItem"
onClick={() => handleSuggestionSearch(item)}
>
<View className="searchSuggestionItemLeft">
<Image
className="icon16"
src={img.ICON_LIST_SEARCH_SEARCH}
/>
<Text
dangerouslySetInnerHTML={{ __html: highlightedText }}
></Text>
</View>
<Image
className="icon16"
src={img.ICON_LIST_SEARCH_SEARCH}
src={img.ICON_LIST_SEARCH_SUGGESTION}
/>
<Text
dangerouslySetInnerHTML={{ __html: highlightedText }}
></Text>
</View>
);
})}
</View>
)}
{/* 历史搜索 */}
{!isShowClearIcon && (
<View className="historySearch">
<View className="historySearchTitleWrapper">
<View className="historySearchTitle">历史搜索</View>
<View className="historySearchClear" onClick={handleClearHistory}>
<Text>清空</Text>
<Image
className="icon16"
src={img.ICON_LIST_SEARCH_SUGGESTION}
className="clearIcon icon16"
src={img.ICON_LIST_SEARCH_CLEAR_HISTORY}
/>
</View>
);
})}
</View>
)}
{/* 历史搜索 */}
{!isShowClearIcon && (
<View className="historySearch">
<View className="historySearchTitleWrapper">
<View className="historySearchTitle">历史搜索</View>
<View className="historySearchClear" onClick={handleClearHistory}>
<Text>清空</Text>
<Image
className="clearIcon icon16"
src={img.ICON_LIST_SEARCH_CLEAR_HISTORY}
/>
</View>
</View>
{isShowHistory && (
<View className="historySearchList">
{(searchHistory || [])?.map((item) => {
if (!item?.title) {
return null;
}
return (
<Text
className="historySearchItem"
onClick={() => handleHistoryClick(item)}
>
{item?.title}
</Text>
);
})}
</View>
)}
</View>
)}
{isShowHistory && (
<View className="historySearchList">
{(searchHistory || [])?.map((item) => {
if (!item?.title) {
return null;
}
return (
<Text
className="historySearchItem"
onClick={() => handleHistoryClick(item)}
>
{item?.title}
</Text>
);
})}
</View>
)}
</View>
)}
</ScrollView>
</View>
</>
);