今天忙里偷闲,分享一个搜索页实现过程,先上效果图:
界面部分比较简单,大体分为导航栏、历史搜索、猜你想搜和热搜榜几个部分,历史搜索采用用户首选项进行存储数据。
导航栏部分相关代码如下:
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 })
})}
Top comments (0)