developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
yangchenggong1_wd
df92bfbb 1 parent 0633ea2e

desc：热门搜索 适配折叠屏

Inline Side-by-side
Showing 2 changed files with 75 additions and 47 deletions
import router from '@ohos.router'
import { NetworkUtil, StringUtils, ToastUtils } from 'wdKit'
import { BreakpointSystem, NetworkUtil, StringUtils, ToastUtils } from 'wdKit'
import { ParamType, TrackConstants, Tracking } from 'wdTracking/Index'
import SearcherAboutDataModel from '../../model/SearcherAboutDataModel'
import { SearchHistoryItem } from '../../viewmodel/SearchHistoryItem'
import { SearchRelatedItem } from '../../viewmodel/SearchRelatedItem'
import { EmptyComponent } from '../view/EmptyComponent'
import { SearchHistoryComponent } from './SearchHistoryComponent'
import { SearchHotsComponent } from './SearchHotsComponent'
import { SearchRelatedComponent } from './SearchRelatedComponent'
... ... @@ -34,7 +33,22 @@ export struct SearchComponent {
@State isGetRequest:boolean = false
@Link fromTabName: string
@StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm';
private breakpointSystem = new BreakpointSystem();
@State percent:number = 1
currentChanged(){
if(this.currentBreakpoint == "md" || this.currentBreakpoint == "lg"){
this.percent = 0.7
}else {
this.percent = 1
}
}
aboutToAppear() {
this.breakpointSystem.register();
this.currentChanged()
//获取提示滚动
this.getSearchHint()
//清除缓存
... ... @@ -49,6 +63,11 @@ export struct SearchComponent {
}, 1000);
}
aboutToDisappear(): void {
this.breakpointSystem.unregister();
}
getRelatedSearchContent() {
if(StringUtils.isNotEmpty(this.searchText)){
SearcherAboutDataModel.getRelatedSearchContentData(encodeURI(this.searchText),getContext(this)).then((value) => {
... ... @@ -134,19 +153,19 @@ export struct SearchComponent {
//分隔符
Divider()
.width('100%')
.height('1lpx')
.height(`${this.calcHeight(1)}lpx`)
.color($r('app.color.color_EDEDED'))
.strokeWidth('1lpx')
.strokeWidth(`${this.calcHeight(1)}lpx`)
}
SearchHotsComponent({onGetSearchRes: (item): void => this.getSearchHotResData(item)})
SearchHotsComponent({onGetSearchRes: (item): void => this.getSearchHotResData(item),percent:this.percent})
}
}
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.Off)
.width('100%')
.height('100%')
.padding({ left: '31lpx', right: '31lpx' })
.padding({ left: `${this.calcHeight(31)}lpx`, right: `${this.calcHeight(31)}lpx` })
} else {
if (this.hasChooseSearch) {
//搜索结果
... ... @@ -244,14 +263,14 @@ export struct SearchComponent {
Swiper(this.swiperController) {
ForEach(this.searchTextData, (item: string, index: number) => {
Text(item)
.fontWeight('400lpx')
.fontSize('25lpx')
.fontWeight(400)
.fontSize(`${this.calcHeight(25)}lpx`)
.fontColor($r('app.color.color_666666'))
.lineHeight('35lpx')
.lineHeight(`${this.calcHeight(35)}lpx`)
.textAlign(TextAlign.Start)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Clip })
.margin({ left: '40lpx' })
.margin({ left: `${this.calcHeight(40)}lpx` })
})
}
.loop(true)
... ... @@ -268,9 +287,9 @@ export struct SearchComponent {
Row(){
Search({ value: this.searchText, placeholder: '', controller: this.controller})
.layoutWeight(1)
.height('69lpx')
.height(`${this.calcHeight(69)}lpx`)
.backgroundColor($r('app.color.color_transparent'))
.textFont({ size: "27lpx", weight: "400lpx" })
.textFont({ size: `${this.calcHeight(27)}lpx`, weight: 400 })
// .defaultFocus(true)
.id("searchId")
.searchIcon({
... ... @@ -318,15 +337,15 @@ export struct SearchComponent {
}
}
})
}.padding({right:'70lpx'})
}.padding({right:`${this.calcHeight(70)}lpx`})
.layoutWeight(1)
Image($r('app.media.search_input_del_icon'))
.width("31lpx")
.height("31lpx")
.width(`${this.calcHeight(31)}lpx`)
.height(`${this.calcHeight(31)}lpx`)
.objectFit(ImageFit.Auto)
.interpolation(ImageInterpolation.Medium)
.margin({left:"495lpx"})
.margin({left:`${this.calcHeight(495)}lpx`})
.onClick(()=>{
this.searchText = ""
})
... ... @@ -336,24 +355,24 @@ export struct SearchComponent {
.backgroundImage($r('app.media.search_page_input_bg'))
.backgroundImageSize(ImageSize.Cover)
.layoutWeight(1)
.height('69lpx')
.height(`${this.calcHeight(69)}lpx`)
//TODO 需要修改输入法 换行
//右
Text("取消")
.textAlign(TextAlign.Center)
.fontWeight('400lpx')
.fontSize('31lpx')
.lineHeight('58lpx')
.fontWeight(400)
.fontSize(`${this.calcHeight(31)}lpx`)
.lineHeight(`${this.calcHeight(58)}lpx`)
.fontColor($r('app.color.color_222222'))
.width('125lpx')
.height('58lpx')
.width(`${this.calcHeight(125)}lpx`)
.height(`${this.calcHeight(58)}lpx`)
.onClick(() => {
router.back()
})
}
.height('85lpx')
.padding({ left: '31lpx' })
.height(`${this.calcHeight(85)}lpx`)
.padding({ left: `${this.calcHeight(31)}lpx` })
.alignItems(VerticalAlign.Center)
}
... ... @@ -395,6 +414,10 @@ export struct SearchComponent {
this.isClickedInputSearch = false
this.isClickedHintSearch = false
}
calcHeight(value:number): number{
return value * this.percent
}
}
function trackSearchClick(upOneLevelPageName: string,keyword:string){
... ...
... ... @@ -10,6 +10,7 @@ const TAG = "SearchHotsComponent"
export struct SearchHotsComponent{
@State searchHotsData:SearchHotContentItem[] = []
onGetSearchRes?: (item:string) => void;
@Prop percent:number = 1
aboutToAppear(){
//获取搜索热词
... ... @@ -34,22 +35,22 @@ export struct SearchHotsComponent{
if(this.searchHotsData.length>0){
Row() {
Image($r('app.media.search_hot_icon'))
.width('46lpx')
.height('46lpx')
.width(`${this.calcHeight(46)}lpx`)
.height(`${this.calcHeight(46)}lpx`)
.objectFit(ImageFit.Auto)
.margin({right:'8lpx'})
.margin({right:`${this.calcHeight(8)}lpx`})
.interpolation(ImageInterpolation.Medium)
Text("热门搜索")
.textAlign(TextAlign.Center)
.fontWeight(FontWeight.Bold)
.fontSize('33lpx')
.lineHeight('46lpx')
.fontSize(`${this.calcHeight(33)}lpx`)
.lineHeight(`${this.calcHeight(46)}lpx`)
.fontColor($r('app.color.color_222222'))
.height('46lpx')
.height(`${this.calcHeight(46)}lpx`)
}
.width('100%')
.margin({bottom:"15lpx"})
.margin({bottom:`${this.calcHeight(15)}lpx`})
}
List(){
... ... @@ -60,49 +61,49 @@ export struct SearchHotsComponent{
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')
.width(`${this.calcHeight(27)}lpx`)
.height(`${this.calcHeight(35)}lpx`)
.objectFit(ImageFit.Auto)
.margin({right:'12lpx'})
.margin({right:`${this.calcHeight(12)}lpx`})
.interpolation(ImageInterpolation.High)
}else {
Text(`${item.sequence}`)
.height('31lpx')
.height(`${this.calcHeight(31)}lpx`)
.fontColor($r('app.color.color_666666'))
.fontSize('27lpx')
.fontSize(`${this.calcHeight(27)}lpx`)
.fontWeight(FontWeight.Regular)
.lineHeight('31lpx')
.margin({right:'12lpx'})
.lineHeight(`${this.calcHeight(31)}lpx`)
.margin({right:`${this.calcHeight(12)}lpx`})
}
Text(`${item.hotEntry}`)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.fontColor($r('app.color.color_222222'))
.fontSize('31lpx')
.fontSize(`${this.calcHeight(31)}lpx`)
.maxLines(1)
.fontWeight(FontWeight.Regular)
.lineHeight('42lpx')
.lineHeight(`${this.calcHeight(42)}lpx`)
}.layoutWeight(1)
if(item.mark===1 || item.mark===2){
Image(item.mark===1?$r('app.media.search_hots_mark1'):$r('app.media.search_hots_mark2'))
.width('42lpx')
.height('31lpx')
.width(`${this.calcHeight(42)}lpx`)
.height(`${this.calcHeight(31)}lpx`)
.objectFit(ImageFit.Auto)
.interpolation(ImageInterpolation.High)
}
}.alignItems(VerticalAlign.Center)
.height('84lpx')
.height(`${this.calcHeight(84)}lpx`)
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
if(index != this.searchHotsData.length-1 ){
Divider()
.width('100%')
.height('1lpx')
.height(`${this.calcHeight(1)}lpx`)
.color($r('app.color.color_F5F5F5'))
.strokeWidth('1lpx')
.strokeWidth(`${this.calcHeight(1)}lpx`)
}
}.height('85lpx')
}.height(`${this.calcHeight(85)}lpx`)
.width('100%')
.alignItems(HorizontalAlign.Start)
}
... ... @@ -117,6 +118,10 @@ export struct SearchHotsComponent{
}).layoutWeight(1)
}.width('100%')
.height('100%')
.margin({top:'46lpx'})
.margin({top:`${this.calcHeight(46)}lpx`})
}
calcHeight(value:number): number{
return value * this.percent
}
}
\ No newline at end of file
... ...