FirstTabTopSearchComponent.ets
2.86 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
/**
* 首页顶部搜索导航栏
* 竖向滚动实现方案
* 方案一 使用动画 + 定时器
* 方案二 使用容器组件Swiper（当前）
*/
import { SPHelper } from 'wdKit/Index'
import { WDRouterPage, WDRouterRule } from 'wdRouter'
import { TrackingButton, TrackConstants } from 'wdTracking/Index'
import SearcherAboutDataModel from '../../model/SearcherAboutDataModel'
import { Logger } from 'wdKit';
import { BottomNavDTO } from 'wdBean/Index'
import { ColorUtils } from '../../utils/ColorUtils'
const TAG = "FirstTabTopSearchComponent"
@Component
export struct FirstTabTopSearchComponent {
@State searchTextData: string[] = []
private swiperController: SwiperController = new SwiperController()
navItem: BottomNavDTO = {} as BottomNavDTO
aboutToAppear() {
this.getSearchHint()
}
getSearchHint() {
SearcherAboutDataModel.getSearchHintData(getContext(this)).then((value) => {
if (value != null) {
this.searchTextData = value
}
this.setDefaultHitData()
}).catch((err: Error) => {
console.log(TAG, JSON.stringify(err))
this.setDefaultHitData()
})
}
setDefaultHitData() {
if (this.searchTextData.length === 0) {
this.searchTextData.push("搜索")
}
}
build() {
Row() {
Image($r('app.media.icon_search'))
.width(18)
.height(18)
.colorFilter(ColorUtils.getDrawingColorFilter(this.getBothColor("")))
.margin({ right: '10lpx' })
if (this.searchTextData != null && this.searchTextData.length > 0) {
Swiper(this.swiperController) {
ForEach(this.searchTextData, (item: string, index: number) => {
Text(item)
.fontWeight(400)
.fontColor(this.getBothColor("#666666"))
.fontSize($r('app.float.font_size_13'))
.textAlign(TextAlign.Start)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Clip })
})
}
.loop(true)
.autoPlay(true)
.interval(3000)
.indicator(false)
.vertical(true)
.height(30)
.enabled(false)
.focusable(false)
}
}
.height(30)
.width(124)
.padding({ left: 15 })
.backgroundImage(this.navItem.searchUrl ? this.navItem.searchUrl :
$r('app.media.background_search'))
.backgroundImageSize(ImageSize.Cover)
.onClick(() => {
Logger.info(TAG, `搜索按钮点击: 新闻`);
TrackingButton.searchClick(TrackConstants.PageName.Search, "NEWS")
let params = { 'tabName': "NEWS" } as Record<string, string>
WDRouterRule.jumpWithPage(WDRouterPage.searchPage, params)
})
}
/**
* 两侧文字图标颜色,搜索图标颜色
* @returns
*/
getBothColor(defaultColor: string): string {
let bothColor = this.navItem.searchBothColor ? this.navItem.searchBothColor : defaultColor
return bothColor
}
}