HarmonyOS 子组件悬浮底部布局

父子组件嵌套,当父组件的高度大于屏幕可见区域的高度时,其中一个子组件始终悬浮在在可见区域底部,当滑动至该父组件的底部时,则在父组件的底部,并且随着父组件可滑出可见区域

HarmonyOS
23h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

该问题可使用list的sticky属性,配合ListItemGroup组件使用,设置ListItemGroup中header和footer是否要吸顶或吸底,

api参考:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-list-V5#sticky9

代码示例:

List() {
  ListItemGroup({ footer: this.itemFoot() }) {
    ListItem() {
      Swiper(this.swiperController) {
        LazyForEach(this.data, (item: MyPhotoData, index: number) => {
          Image($r('app.media.496799071_thumb'))
            .width('100%')
            .height(this.swiperMaxHeight)
        }, (item: MyPhotoData) => JSON.stringify(item))
      }
      .cachedCount(2)
      .index(0)
      .autoPlay(true)
      .interval(3000)
      .loop(true)
      .indicatorInteractive(true)
      .duration(300)
      .itemSpace(0)
      .indicator(false)
      .displayArrow(false)
      .curve(Curve.Linear)
      .onChange((index: number) => {
        this.duration = 3000
        this.currentIndex = index
      })
      .onAppear(() => {
        this.currentIndex = 0
      })
    }
    .height(this.swiperMaxHeight - this.progressHeight)
  }

  ListItemGroup() {
    ListItem() {
      Text('文章区域')
        .width('100%')
        .height(500)
        .backgroundColor(Color.Orange)
    }
  }
}
.width('100%')
.height('100%')
.sticky(StickyStyle.Footer)

itemfoot代码:

@Builder
itemFoot() {
  Row({ space: 5 }) {
    ForEach(this.progressData, (item: MyPhotoData, index: number) => {
      Stack({ alignContent: Alignment.Start }) {
        Row()
          .zIndex(0)
          .width('100%')
          .height(4)
          .borderRadius(2)
          .backgroundColor("#19182431")
        Row()
          .zIndex(1)
          .width(this.currentIndex >= index ? '100%' : '0')
          .height(4)
          .borderRadius(2)
          .backgroundColor("#ff007dff")
          .animation({
            duration: this.duration - 400,
            curve: Curve.Linear,
            iterations: 1,
            playMode: PlayMode.Normal,
            onFinish: () => {
              if (this.currentIndex === this.progressData.length - 1) {
                this.duration = 400
                this.currentIndex = -1
              }
            }
          })
      }
      .layoutWeight(1)
    }, (item: MyPhotoData) => JSON.stringify(item))
  }
  .width('100%')
  .height(this.progressHeight)
}
分享
微博
QQ
微信
回复
19h前
相关问题
HarmonyOS 组件超出父组件布局
31浏览 • 1回复 待解决
HarmonyOS 如何实现底部悬浮按钮
29浏览 • 1回复 待解决
HarmonyOS 组件渲染超过了父布局
20浏览 • 1回复 待解决
音乐播放悬浮按钮该如何布局
751浏览 • 1回复 待解决
基于窗口实现应用内悬浮
788浏览 • 1回复 待解决
HarmonyOS 底部横条和window路由问题
70浏览 • 1回复 待解决
HarmonyOS有没有悬浮组件或者库
437浏览 • 1回复 待解决
ArkTS布局组件实现瀑布流式布局
995浏览 • 1回复 待解决
HarmonyOS Tabs组件组件问题
463浏览 • 1回复 待解决