鸿蒙Next 搜索框热词滚动效果

177 阅读1分钟

此功能利用swiper实现,步骤较为简单,直接贴代码 注:Swiper组件内容也可以用LazyForEach进行优化

@Preview
@Component
export struct HotSearchView {
  build() {
    Row({ space: 5 }) {
      Image($r('app.media.icon_search')).height(12).width(12).fillColor(Color.Black)
      Swiper() {
        Repeat<string>(searchList).each((item) => {
          Text(item.item)
            .fontSize(12).fontColor(Color.Gray).margin({ left: 5 })
        })
      }
      .width("80%")
      .autoPlay(true)
      .vertical(true)
      .indicator(false)
      .interval(1500)
    }
    .padding({ left: 15, right: 15 })
    .height(40)
    .borderRadius(20)
    .backgroundColor("#f8f4f4")
  }
}

export const searchList: string[] = [
  '深水炸弹', '天地龙鳞', '归去来兮', '塞北江南', 'Mamma voglio anchio la '
]