HarmonyOS 循环水平滚动

要实现一个水平循环滚动的列表,目前可以用List实现,但是不支持循环滚动,有可以实现水平循环滚动的组件或者方案吗?

HarmonyOS
2025-01-09 16:11:37
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Excelsior_abit

可以参考以下链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-create-looping-V5#循环播放

示例参考如下:

class Item {
  img: ResourceStr = '';
  title?: string = ''
}

@Entry
@Component
struct Index {
  index: number = 0
  @State NoteLists: Array<Item> = [{ img: $r('app.media.app_icon'), title: '头像1号' },
    { img: $r('app.media.app_icon'), title: '头像2号' }, { img: $r('app.media.app_icon'), title: '头像3号' },
    { img: $r('app.media.app_icon'), title: '头像4号' }, { img: $r('app.media.app_icon'), title: '头像5号' },
    { img: $r('app.media.app_icon'), title: '头像6号' }]
  scroller: Scroller = new Scroller()

  build() {
    Row() {
      Column() {
        Scroll(this.scroller) {
          Row() {
            ForEach(this.NoteLists, (item: Item) => {
              Column() {
                Image(item.img)
                  .width(50)
                  .height(50)
                Text(item.title)
              }
              .width(80)
              .height(80)
              .justifyContent(FlexAlign.SpaceBetween)
            })
          }
        }
        .width('100%')
        .scrollable(ScrollDirection.Horizontal)
        .scrollBar(BarState.Off)
      }
      .width('100%')
    }
    .height('100%')
  }

  onPageShow() {
    setInterval(() => {
      // 点击后滑动到指定位置,即下滑100.0vp的距离
      if (this.index == 6) {
        this.index = 0
      }
      console.log("index is:" + this.index)
      let currentIndex: number = this.index;
      let xOffset: number = this.scroller.currentOffset().xOffset;
      this.NoteLists.push(this.NoteLists[currentIndex]);
      this.index = currentIndex + 1;
      this.scroller.scrollTo({ xOffset: xOffset + 20, yOffset: 0 })
    }, 100)
  }
}
分享
微博
QQ
微信
回复
2025-01-09 18:55:38
相关问题
list 支持循环滚动吗?
2509浏览 • 1回复 待解决
HarmonyOS DatePicker如何取消循环滚动
385浏览 • 1回复 待解决
HarmonyOS 图片水平翻转问题
163浏览 • 1回复 待解决
HarmonyOS UI布局水平居中问题
470浏览 • 1回复 待解决
HarmonyOS 无限循环banner效果
343浏览 • 1回复 待解决
HarmonyOS forEach return退出循环
397浏览 • 1回复 待解决
HarmonyOS List怎么适配鼠标水平滑动
162浏览 • 1回复 待解决
HarmonyOS Swiper循环问题
738浏览 • 1回复 待解决
HarmonyOS 线程通信 事件循环问题
511浏览 • 1回复 待解决
HarmonyOS feature模块循环依赖
362浏览 • 1回复 待解决