头部滚动渐变效果,页面滚动时头部透明度渐变出现,继续滚动Tabs,页签吸顶。

页面滚动时头部透明度渐变出现,继续滚动Tabs,页签吸顶。

HarmonyOS
2024-05-26 16:09:46
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
pumayze

头部透明度使用状态变量设置透明度,在Scroller的onScroll滚动事件中进行透明度渐变设置。

完整代码

@Entry 
@Component 
struct Index { 
  @State message: string = '华子微博' 
  @State op: number = 0 
  private scroller: Scroller = new Scroller() 
  words: string[] = [ 
    "那些曾经以为永远不会忘记的伤痛,那些曾经以为永远不会消失的伤口,都会在时间的手掌里,慢慢地得到抚平。", 
    "没有人能给我你曾经给我的那些色彩。", 
    "30°昨天太近,明天太远", 
    "流年未亡,夏日已尽。", 
    "外面的天亮了,我们的心暗了。", 
  ] 
 
  aboutToAppear() { 
    this.scroller.scrollTo({ xOffset: 0, yOffset: 50 }) 
  } 
 
  build() { 
    Column() { 
      this.waterFlowBody() 
    } 
    .width('100%') 
    .height('100%') 
  } 
 
  @Builder 
  waterFlowBody() { 
    Text('华子微博') 
      .fontSize(50)// .width('100%') 
      .fontWeight(FontWeight.Bold) 
      .textAlign(TextAlign.Center) 
      .backgroundColor(0xAFEEEE) 
      .opacity(this.op) 
    this.messageFlow() 
  } 
 
  @Builder 
  messageFlow() { 
    Scroll(this.scroller) { 
      Column() { 
        Image($r('app.media.startIcon')) 
          .width('100%') 
          .height(200) 
          .objectFit(ImageFit.Fill) 
          .onAreaChange(async () => this.handleOP()) 
        Tabs({ barPosition: BarPosition.Start }) { 
          TabContent() { 
            List({ space: 10 }) { 
              ForEach(this.words, (item) => { 
                ListItem() { 
                  Column() { 
                  }.height(100).width('100%') 
                } 
              }, item => item) 
            }.width("100%") 
          }.tabBar("Tab1") 
 
          TabContent() { 
          }.tabBar("Tab2") 
        } 
        .vertical(false) 
        .height("100%") 
      }.width("100%") 
    } 
    .backgroundColor('#DCDCDC') 
    .scrollBar(BarState.Off) 
    .width('100%') 
    .height('100%') 
    .onScroll(() => this.handleOP()) 
    .onScrollEnd(() => this.scrollEnd()) 
  } 
 
  private handleOP() { 
    var height = this.scroller.currentOffset().yOffset 
    if (height >= 150) { 
      this.op = 1 
    } else if (height <= 60) { 
      this.op = 0 
    } else { 
      this.op = (height - 60) / 90.0 
    } 
  } 
 
  private scrollEnd() { 
    var height = this.scroller.currentOffset().yOffset 
    if (height <= 60) { 
      this.scroller.scrollTo({ xOffset: 0, yOffset: 50 }) 
    } 
  } 
}
分享
微博
QQ
微信
回复
2024-05-27 21:31:44
相关问题
页面和列表嵌套滚动,实现列表
533浏览 • 1回复 待解决
SideBarContainer如何设置透明度
1058浏览 • 1回复 待解决
设置子窗口透明度未生效
701浏览 • 1回复 待解决
是否可以实现滚动锚定的效果
449浏览 • 1回复 待解决
如何实现分组列表的/效果
990浏览 • 1回复 待解决
如何获取List组件滚动滚动的距离
1042浏览 • 1回复 待解决
如何实现顶部渐变遮罩效果
22浏览 • 0回复 待解决
tabs结合scroll实现效果
465浏览 • 1回复 待解决
如何实现嵌套滚动技术
445浏览 • 1回复 待解决
如何实现Tabs组件tarbar的效果
244浏览 • 1回复 待解决
提问
该提问已有0人参与 ,帮助了0人