• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import { NavigationBar } from '../../../common/components/navigationBar'
17
18class BasicDataSource implements IDataSource {
19  private listeners: DataChangeListener[] = []
20
21  public totalCount(): number {
22    return 0
23  }
24
25  public getData(index: number): any {
26    return undefined
27  }
28
29  registerDataChangeListener(listener: DataChangeListener): void {
30    if (this.listeners.indexOf(listener) < 0) {
31      this.listeners.push(listener)
32    }
33  }
34
35  unregisterDataChangeListener(listener: DataChangeListener): void {
36    const pos = this.listeners.indexOf(listener);
37    if (pos >= 0) {
38      this.listeners.splice(pos, 1)
39    }
40  }
41
42  notifyDataReload(): void {
43    this.listeners.forEach(listener => {
44      listener.onDataReloaded()
45    })
46  }
47
48  notifyDataAdd(index: number): void {
49    this.listeners.forEach(listener => {
50      listener.onDataAdded(index)
51    })
52  }
53
54  notifyDataChange(index: number): void {
55    this.listeners.forEach(listener => {
56      listener.onDataChanged(index)
57    })
58  }
59}
60
61class MyDataSource extends BasicDataSource {
62  public dataArray: string[] = []
63
64  constructor(count) {
65    super()
66    for (var index = 0;index < count; index++) {
67      this.dataArray.push(`${index}`)
68    }
69  }
70
71  public totalCount(): number {
72    return this.dataArray.length
73  }
74
75  public getData(index: number): any {
76    return this.dataArray[index]
77  }
78
79  public addData(index: number, data: string): void {
80    this.dataArray.splice(index, 0)
81    this.notifyDataAdd(index)
82  }
83}
84
85@Entry
86@Component
87struct lazyForEachSample {
88  @State number: number = 10
89  @State data: MyDataSource = new MyDataSource(10)
90
91  build() {
92    Column() {
93      NavigationBar({ title: '数据懒加载' })
94      Column() {
95        Row() {
96          Text('数据数量')
97            .fontSize('16fp')
98            .fontColor('#182431')
99            .fontWeight(FontWeight.Medium)
100          Blank()
101          Column() {
102            Text(`${this.number}`)
103              .textAlign(TextAlign.End)
104              .fontSize('16fp')
105              .fontColor('#182431')
106              .fontWeight(FontWeight.Medium)
107              .width('100%')
108          }
109          .width('30%')
110          .bindMenu([
111            {
112              value: '10',
113              action: () => {
114                this.number = 10
115                this.data = new MyDataSource(this.number)
116              }
117            },
118            {
119              value: '100',
120              action: () => {
121                this.number = 100
122                this.data = new MyDataSource(this.number)
123              }
124            },
125            {
126              value: '1000',
127              action: () => {
128                this.number = 1000
129                this.data = new MyDataSource(this.number)
130              }
131            },
132            {
133              value: '10000',
134              action: () => {
135                this.number = 10000
136                this.data = new MyDataSource(this.number)
137              }
138            },
139            {
140              value: '100000',
141              action: () => {
142                this.number = 100000
143                this.data = new MyDataSource(this.number)
144              }
145            },
146          ])
147        }
148        .height(56)
149        .width('100%')
150        .padding({ left: '3%', right: '3%' })
151        .borderRadius(24)
152        .backgroundColor('#FFFFFF')
153        .margin({ top: 8 })
154
155        List({ space: 20, initialIndex: 0 }) {
156          LazyForEach(this.data, (item, index) => {
157            ListItem() {
158              Row() {
159                Image($r('app.media.ic_public_play_norm'))
160                  .objectFit(ImageFit.Contain)
161                  .width('15%')
162                  .margin({ top: 10, right: '4%', bottom: 10 })
163                  .borderRadius('50%')
164                Text(`${this.data['dataArray'].indexOf(item)}`)
165                  .textAlign(TextAlign.Center)
166                  .fontSize('16fp')
167                  .fontColor('#182431')
168                  .fontWeight(FontWeight.Medium)
169                  .width('73%')
170                  .height(40)
171                  .margin({ top: 5 ,left:'5%'})
172                .backgroundColor('#ccc')
173              }
174              .height('10%')
175            }
176            .margin({ top: 22 })
177          }, item => item)
178        }
179        .edgeEffect(EdgeEffect.Spring)
180        .flexGrow(1)
181        .width('100%')
182        .height('100%')
183        .borderRadius(24)
184        .margin({ top: 12 })
185        .backgroundColor('#FFFFFF')
186        .listDirection(Axis.Vertical)
187        .padding({ left: '3%', right: '3%', top: 22, bottom: 22 })
188        .divider({ strokeWidth: 1, color: '#32000000', startMargin: '10%', endMargin: 20 })
189      }.width('100%')
190      .height('93%')
191    }
192    .height('100%')
193    .backgroundColor('#F1F3F5')
194    .padding({ left: '3%', right: '3%', bottom: 35 })
195  }
196
197  pageTransition() {
198    PageTransitionEnter({ duration: 370, curve: Curve.Friction })
199      .slide(SlideEffect.Bottom)
200      .opacity(0.0)
201
202    PageTransitionExit({ duration: 370, curve: Curve.Friction })
203      .slide(SlideEffect.Bottom)
204      .opacity(0.0)
205  }
206}