SearchRelatedComponent.ets
2.05 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import { SearchRelatedItem } from '../../viewmodel/SearchRelatedItem'
const TAG = "SearchRelatedComponent"
/**
* 热门搜索
*/
@Component
export struct SearchRelatedComponent {
@Link relatedSearchContentData: SearchRelatedItem[]
onGetSearchRes?: (item:string) => void;
@Prop searchText: string
build() {
Column() {
List() {
ForEach(this.relatedSearchContentData, (item: SearchRelatedItem, index: number) => {
ListItem() {
Column(){
Row() {
Image($r('app.media.search_related_item_icon'))
.width('31lpx')
.height('31lpx')
.objectFit(ImageFit.Auto)
.margin({ right: '10lpx' })
.interpolation(ImageInterpolation.High)
Text(){
ForEach(item.data_arr,(item:string)=>{
Span(item)
.fontColor(item===this.searchText?$r('app.color.color_ED2800'):$r('app.color.color_000000'))
.fontSize('31lpx')
.fontWeight('400lpx')
.lineHeight('50lpx')
})
}
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.layoutWeight(1)
}.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Start)
.height('95lpx')
if (index != this.relatedSearchContentData.length - 1) {
Divider()
.width('100%')
.height('1lpx')
.color($r('app.color.color_F5F5F5'))
.strokeWidth('1lpx')
}
}
}.width('100%')
.onClick(()=>{
if (this.onGetSearchRes !== undefined) {
this.onGetSearchRes(item.data_string)
}
})
})
}.width('100%')
}.width('100%')
.margin({ top: '8lpx' })
.padding({ left: '31lpx', right: '31lpx' })
}
test(){
let c = "12121212121"
}
}