HarmonyOS 自动横向滚动List

class Article { 
  id: string; 
  title: string; 
  brief: string; 
 
  constructor(id: string, title: string, brief: string) { 
    this.id = id; 
    this.title = title; 
    this.brief = brief; 
  } 
} 
 
@Entry 
@Component 
struct ArticleListView { 
  @State isListReachEnd: boolean = false; 
  @State articleList: Array<Article> = [ 
    new Article('001', '第1篇文章', '文章简介内容'), 
    new Article('002', '第2篇文章', '文章简介内容'), 
    new Article('003', '第3篇文章', '文章简介内容'), 
    new Article('004', '第4篇文章', '文章简介内容'), 
    new Article('005', '第5篇文章', '文章简介内容'), 
    new Article('006', '第6篇文章', '文章简介内容') 
  ] 
 
  loadMoreArticles() { 
    this.articleList.push(this.articleList[0]); 
    this.articleList.splice(0,1); 
  } 
 
  build() { 
    Column({ space: 5 }) { 
      List() { 
        ForEach(this.articleList, (item: Article) => { 
          ListItem() { 
            ArticleCard({ article: item }) 
              .margin({ top: 20 }) 
          } 
        }, (item: Article) => item.id) 
      } 
      .onReachEnd(() => { 
        this.loadMoreArticles(); 
      }) 
      .padding(20) 
      .scrollBar(BarState.Off) 
    } 
    .width('100%') 
    .height('100%') 
    .backgroundColor(0xF1F3F5) 
  } 
} 
 
@Component 
struct ArticleCard { 
  @Prop article: Article; 
 
  build() { 
    Row() { 
      Image($r('app.media.startIcon')) 
        .width(80) 
        .height(80) 
        .margin({ right: 20 }) 
      Column() { 
        Text(this.article.title) 
          .fontSize(20) 
          .margin({ bottom: 8 }) 
        Text(this.article.brief) 
          .fontSize(16) 
          .fontColor(Color.Gray) 
          .margin({ bottom: 8 }) 
      } 
      .alignItems(HorizontalAlign.Start) 
      .width('80%') 
      .height('100%') 
    } 
    .padding(20) 
    .borderRadius(12) 
    .backgroundColor('#FFECECEC') 
    .height(120) 
    .width('100%') 
    .justifyContent(FlexAlign.SpaceBetween) 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.