HarmonyOS 横向列表条目自动无限循环滚动

向列表条目自动无限循环滚动,比如数组5条数据,怎么实现无限循环滚动

我用Scroll来实现,数据做不到无限循环,有没有什么控件可以实现数据无线循环滚动效果

ListItem() {

  Column() {
    Row() {
      Scroll(this.scrollerColumn) {
        Row({ space: 5 }) {
          ForEach(item.subSectionList, (item: SubSection) => {
            Text(item.subsectionname)
              .fontSize(14)
              .fontColor(Color.Red)
              .border({
                style: BorderStyle.Solid,
                width: 1,
                color: Color.Red,
                radius: 10
              })
              .padding({
                left: 5,
                right: 5,
                top: 3,
                bottom: 3
              })
              .margin({ left: 10 })
              .onClick(() => {
                router.pushUrl({
                  url: 'pages/newsdetail/NewsDetailPage',
                  params: {
                    id: item.subsectionid,
                  }
                }, router.RouterMode.Single)
              })
          })

        }
      }.scrollable(ScrollDirection.Horizontal) //设置滚动方向
      .scrollBar(BarState.Off)
      .width('100%')

    }
  }.backgroundColor('#F6F6F6')
  .padding({ top: 15, bottom: 15 })

}
HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
fox280

参考示例如下:

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
微信
回复
2天前
相关问题
HarmonyOS 自动横向滚动List
158浏览 • 1回复 待解决
HarmonyOS 无限循环banner效果
8浏览 • 1回复 待解决
关于权限列表条目缺少问题
2020浏览 • 1回复 待解决
list 支持循环滚动吗?
2224浏览 • 1回复 待解决
HarmonyOS DatePicker如何取消循环滚动
44浏览 • 1回复 待解决
HarmonyOS 滚动列表问题
53浏览 • 1回复 待解决
HarmonyOS 滚动列表问题?
173浏览 • 0回复 待解决
HarmonyOS 列表视频滚动播放
424浏览 • 1回复 待解决
List列表组件如何改为横向显示的?
967浏览 • 1回复 待解决
HarmonyOS 要做一个可以无限滚动的list
707浏览 • 1回复 待解决
页面和列表嵌套滚动,实现列表吸顶
1302浏览 • 1回复 待解决
HarmonyOS Tabs如何设置不自动滚动
52浏览 • 1回复 待解决