鸿蒙 Scroll 页面滑动，顶部慢慢出现顶部搜索框

最新推荐文章于 2024-08-25 20:51:18 发布

AR-Json

最新推荐文章于 2024-08-25 20:51:18 发布

阅读量375

点赞数 1

文章标签： harmonyos

本文链接：https://blog.csdn.net/u011345545/article/details/135031939

版权

build() {
  Stack() {
    Scroll(this.scroller) {
      Column() {
        Swiper() {
          ForEach(this.bannerList, (item: BannerItemModel) => {
            Image(item.imgUrl).width("100%")
          }, (item: BannerItemModel) => item.id.toString())
        }.width("100%").height(200).autoPlay(true)

        Tabs({ barPosition: BarPosition.Start }) {
          ForEach(this.tabList,(item:string,index:number)=>{
            TabContent() {
              HomeHotFg({mId:this.currentIndex})
            }.tabBar(this.TabBuilder(index, item))
          },(item : string) => item)

        }.width("100%").height("93%")
        .onChange((index: number) => {
          this.currentIndex = index
        })

      }.width("100%")
    }.width("100%").height("100%")
    .onScroll((xOffset: number, yOffset: number) => {
      //判断滑动状态，改变顶部栏透明度
      if (this.scroller.currentOffset().yOffset / 150 <= 1) {
        this.bgOpacity = this.scroller.currentOffset().yOffset / 150
      }
    })
    //顶部自定义UI
    TabHomeHeadView({ bgOpacity: this.bgOpacity })
  }.width("100%").height("100%").alignContent(Alignment.TopStart)
}