FirstTabTopComponent.ets
2.74 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
import SearcherAboutDataModel from '../../model/SearcherAboutDataModel'
import RouteManager from '../../utils/RouteManager'
/**
* 首页顶部搜索导航栏
* 竖向滚动实现方案
* 方案一 使用动画 + 定时器
* 方案二 使用容器组件Swiper（当前）
*/
const TAG = "FirstTabTopComponent"
@Component
export struct FirstTabTopComponent{
@State searchTextData :string[] = []
private swiperController: SwiperController = new SwiperController()
aboutToAppear(){
this.getSearchHint()
}
getSearchHint(){
SearcherAboutDataModel.getSearchHintData(getContext(this)).then((value)=>{
if(value!=null){
this.searchTextData = value
}
}).catch((err:Error)=>{
console.log(TAG,JSON.stringify(err))
})
}
build(){
Column(){
Row(){
Row(){
Image($r('app.media.search_icon'))
.objectFit(ImageFit.Cover)
.height('23lpx')
.width('23lpx')
.margin({right:'13lpx'})
.interpolation(ImageInterpolation.Medium)
if(this.searchTextData!=null && this.searchTextData.length>0){
Swiper(this.swiperController) {
ForEach(this.searchTextData, (item: string, index: number ) => {
Text(item)
.fontWeight('400lpx')
.fontSize('25lpx')
.fontColor($r('app.color.color_666666'))
.lineHeight('35lpx')
.textAlign(TextAlign.Start)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Clip})
})
}
.loop(true)
.autoPlay(true)
.interval(3000)
.indicator(false)
.vertical(true)
}
}.width('257lpx')
.height('61lpx')
.padding({left:'31lpx'})
.backgroundImage($r('app.media.top_search_bg'))
.backgroundImageSize(ImageSize.Cover)
.alignItems(VerticalAlign.Center)
.onClick(()=>{
RouteManager.jumpNewPage("pages/SearchPage")
})
Image($r('app.media.top_title_bg'))
.objectFit(ImageFit.Auto)
.height('58lpx')
.width('152lpx')
.interpolation(ImageInterpolation.Medium)
Row(){
Text("早晚报")
}.backgroundImage($r('app.media.top_right_bg'))
.justifyContent(FlexAlign.Center)
.backgroundImageSize(ImageSize.Cover)
.width('257lpx')
.height('61lpx')
}.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}.height('73lpx')
.width('100%')
.justifyContent(FlexAlign.End)
.backgroundColor($r('app.color.white'))
}
}