HarmonyOS 鸿蒙Next 需要一个可以循环滚动的组件

发布于 1周前 作者 yibo5220 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 需要一个可以循环滚动的组件 求一个可以循环滚动的组件，swiper试了不行，组件和实际渲染的有距离偏差，点击事件会出问题

Harmonyos Next教程
5 回复

可以通过list的轮巡，参考下面的代码：

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)
  }
}

还是swiper的动画效果比较好：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-container-swiper-V13

组件和实际渲染的有距离偏差是指的什么问题呢，可以提供个Demo一起看看不

更多关于HarmonyOS 鸿蒙Next 需要一个可以循环滚动的组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


我看了下上面的demo，每100ms会push数据，这样数据会很大，还要滚动，感觉不太好，

text和文字渲染错位了，

cke_162.png

在HarmonyOS（鸿蒙）系统中，实现一个可以循环滚动的组件，你可以利用ArkUI框架提供的组件和特性来完成。具体来说，你可以使用List或Scroller组件来实现滚动效果，并结合数据绑定和事件处理机制来实现循环滚动。

List组件适用于需要展示大量数据且支持滚动查看的场景，你可以通过设置数据源和滚动监听器来实现数据的动态加载和滚动控制。为了实现循环滚动，你可以在数据达到末尾或开头时，通过修改数据源来模拟循环效果，即将数据重新排序或添加重复数据以实现无缝滚动。

Scroller组件则提供了更灵活的滚动控制，你可以通过操作其滚动位置和滚动速度来实现循环滚动效果。这通常涉及到对滚动位置的监听和计算，以及根据滚动位置动态调整显示内容。

需要注意的是，具体实现方式可能因应用场景和需求的不同而有所差异。你可以根据项目的实际情况选择合适的组件和滚动策略。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部