SearchHotsComponent.ets
3.67 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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import SearcherAboutDataModel from '../../../model/SearcherAboutDataModel'
import { SearchHotContentItem } from '../../../viewmodel/SearchHotContentItem'
const TAG = "SearchHotsComponent"
/**
* 热门搜索
*/
@Component
export struct SearchHotsComponent{
@State searchHotsData:SearchHotContentItem[] = []
aboutToAppear(){
//获取搜索热词
this.getSearchHotsData()
}
getSearchHotsData(){
SearcherAboutDataModel.getSearchHotsData(getContext(this)).then((value)=>{
if(value!=null){
this.searchHotsData = value
}
}).catch((err:Error)=>{
console.log(TAG,JSON.stringify(err))
})
}
build(){
Column(){
Row() {
Image($r('app.media.search_hot_icon'))
.width('46lpx')
.height('46lpx')
.objectFit(ImageFit.Auto)
.margin({right:'8lpx'})
.interpolation(ImageInterpolation.Medium)
Text("热门搜索")
.textAlign(TextAlign.Center)
.fontWeight('600lpx')
.fontSize('33lpx')
.lineHeight('46lpx')
.fontColor($r('app.color.color_222222'))
.height('38lpx')
}
.width('100%')
List(){
ForEach(this.searchHotsData,(item:SearchHotContentItem,index:number)=>{
ListItem(){
Column(){
Column(){
Row(){
Row(){
if(item.sequence <=3){
Image(item.sequence===1?$r('app.media.search_hot_num1'):item.sequence===2?$r('app.media.search_hot_num2'):$r('app.media.search_hot_num3'))
.width('27lpx')
.height('35lpx')
.objectFit(ImageFit.Auto)
.margin({right:'12lpx'})
}else {
Text(`${item.sequence}`)
.height('31lpx')
.fontColor($r('app.color.color_666666'))
.fontSize('27lpx')
.fontWeight('400lpx')
.lineHeight('31lpx')
.margin({right:'12lpx'})
}
Text(`${item.hotEntry}`)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.fontColor($r('app.color.color_222222'))
.fontSize('31lpx')
.maxLines(1)
.fontWeight('400lpx')
.lineHeight('42lpx')
}.layoutWeight(1)
if(item.mark!=0){
Image(item.mark===1?$r('app.media.search_hots_mark1'):$r('app.media.search_hots_mark2'))
.width('42lpx')
.height('31lpx')
.objectFit(ImageFit.Auto)
.interpolation(ImageInterpolation.Medium)
}
}.alignItems(VerticalAlign.Center)
.height('84lpx')
.justifyContent(FlexAlign.SpaceBetween)
if(index != this.searchHotsData.length-1 ){
Divider()
.width('100%')
.height('1lpx')
.color($r('app.color.color_F5F5F5'))
.strokeWidth('1lpx')
}
}.height('108lpx')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Start)
.padding({left:'27lpx'})
}
}
.onClick(()=>{
})
.height('117lpx')
})
}.onScrollFrameBegin((offset, state) => {
return { offsetRemain: 0 }
}).layoutWeight(1)
}.width('100%')
.height('100%')
.margin({top:'46lpx'})
}
}