HarmonyOS NEXT开发实战教程—淘宝搜索页

今天忙里偷闲，分享一个淘宝搜索页实现过程，先上效果图：

 

 

界面部分比较简单，大体分为导航栏、历史搜索、猜你想搜和热搜榜几个部分，历史搜索采用用户首选项进行存储数据。

导航栏部分相关代码如下：

Flex({direction:FlexDirection.Row,wrap:FlexWrap.NoWrap,alignItems:ItemAlign.Center}){  Image($r('app.media.back'))    .width(30)    .height(30)    .objectFit(ImageFit.Contain)  Flex({direction:FlexDirection.Row,wrap:FlexWrap.NoWrap,alignItems:ItemAlign.Center}){      TextInput({placeholder:'长款羽绒服',text:this.searchText})        .width('100%')        .placeholderColor(Color.Gray)        .fontSize(14)        .backgroundColor('rgb(226,226,226)')        .enterKeyType(EnterKeyType.Search)        .onChange((str)=>{          this.searchText = str        })        .onSubmit(()=>{          this.saveHistory(this.searchText)          this.searchText = ''        })    Image($r('app.media.scan'))      .width(22)      .height(22)      .margin({left:5})      .constraintSize({minWidth:22})      .objectFit(ImageFit.Contain)    Text('搜索')      .width(60)      .height(28)      .backgroundColor(Color.Orange)      .borderRadius(4)      .fontColor(Color.White)      .textAlign(TextAlign.Center)      .fontSize(12)      .margin({left:5})  }  .padding({left:5,right:5})  .width('100%')  .height(34)  .backgroundColor('rgb(226,226,226)')  .borderRadius(8)  .margin({left:5})}.padding({left:10,right:10}).width('100%').backgroundColor(Color.White).height(45)

历史搜索部分采用Flex布局实现：

Flex({direction:FlexDirection.Row,wrap:FlexWrap.Wrap}){  ForEach(this.hisList,(str:string,index)=>{    Text(str)      .fontColor('#4a4a4a')      .fontSize(12)      .padding({left:6,right:6,top:4,bottom:4})      .borderWidth(1)      .borderColor('rgb(216,216,216)')      .borderStyle(BorderStyle.Solid)      .margin({left:5,top:5})      .textAlign(TextAlign.Center)      .borderRadius(4)  })}

猜你想搜部分，同样使用Flex布局：

Flex({direction:FlexDirection.Row,wrap:FlexWrap.Wrap}){  ForEach(this.guessList,(str:string,index)=>{    Text(str)      .fontColor('#4a4a4a')      .fontSize(15)      .margin({top:6})      .width('50%')  })}

热搜榜部分使用一个Scroll和一个Swiper实现联动效果：

Column(){  Scroll(this.scrollController){    Row({space:30}){      ForEach(this.hotTitleList,(str:string,index)=>{        Text(str)          .fontSize(15)          .fontColor(this.hotIndex == index?Color.Orange:Color.Gray)          .fontWeight(this.hotIndex == index?FontWeight.Bold:FontWeight.Normal)          .onClick(()=>{            this.hotIndex = index            this.swiperController.changeIndex(this.hotIndex,true)          })      })    }    .height(45)    .alignItems(VerticalAlign.Center)  }  .scrollable(ScrollDirection.Horizontal)  .scrollBar(BarState.Off)  .width('100%')  Swiper(this.swiperController){    ForEach(this.hotTitleList,(str:string,index)=>{      Column(){        ForEach(this.hotContentList,(str:string,index)=>{          Row(){            Row(){              Text((index+1).toString())                .fontSize(15)                .fontColor('#4a4a4a')                .fontWeight(FontWeight.Bold)                .width(40)                .textAlign(TextAlign.Center)              Text(str)                .fontSize(15)                .fontColor('#4a4a4a')            }            Text('热度100万')              .fontSize(12)              .fontColor(Color.Gray)          }          .width('100%')          .height(40)          .justifyContent(FlexAlign.SpaceBetween)          .alignItems(VerticalAlign.Center)          .borderRadius(10)          .margin({top:8})          .linearGradient({            angle: 90,            colors: [[index<3?0xfff8f3:0xf9f9f9, 0.0], [index<4?0xfffbfa:0xfcfcfc, 0.4], [0xffffff, 1.0]]          })        })      }      .width('100%')      .alignItems(HorizontalAlign.Start)    })  }  .vertical(false)  .indicator(false)  .loop(false)  .onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => {    this.hotIndex = index    console.info("index: " + index)    console.info("current offset: " + extraInfo.currentOffset)    const xOffset: number = this.scrollController.currentOffset().xOffset;    this.scrollController.scrollTo({ xOffset: index*70, yOffset: 0 })  })}