diff --git a/ComponentReuse/positive/src/main/ets/common/CustomRoutes.ets b/ComponentReuse/positive/src/main/ets/common/CustomRoutes.ets
index 90dd397157be51de3e416c59e918373e64559ca4..a545a5adf2f74112e7aacf66069943a6d42c2366 100644
--- a/ComponentReuse/positive/src/main/ets/common/CustomRoutes.ets
+++ b/ComponentReuse/positive/src/main/ets/common/CustomRoutes.ets
@@ -18,18 +18,18 @@ export class CustomRoutes {
{
title: '未使用组件复用',
child: [
- { text: '场景1', title: '列表项结构类型相同', to: 'NoReuseScene1' },
- { text: '场景2', title: '列表项结构类型相同-结构一', to: 'NoReuseScene2_StructureOne' },
- { text: '场景2', title: '列表项结构类型相同-结构二', to: 'NoReuseScene2_StructureTwo' },
- { text: '场景3', title: '列表项内子组件可拆分组合', to: 'NoReuseScene3' }
+ { text: '场景1', title: '列表项结构类型相同', to: 'NoReuseScene1Positive' },
+ { text: '场景2', title: '列表项结构类型相同-结构一', to: 'NoReuseScene2_StructureOnePositive' },
+ { text: '场景2', title: '列表项结构类型相同-结构二', to: 'NoReuseScene2_StructureTwoPositive' },
+ { text: '场景3', title: '列表项内子组件可拆分组合', to: 'NoReuseScene3Positive' }
]
},
{
title: '组件复用使用不当',
child: [
- { text: '场景1', title: '父组件未使用复用，子组件使用复用', to: 'ImproperReuseOfComponentsScene1' },
- { text: '场景2', title: '复用嵌套', to: 'ImproperReuseOfComponentsScene2' },
- { text: '场景3', title: 'reuseId分类过粗', to: 'ImproperReuseOfComponentsScene3' }
+ { text: '场景1', title: '父组件未使用复用，子组件使用复用', to: 'ImproperReuseOfComponentsScene1Positive' },
+ { text: '场景2', title: '复用嵌套', to: 'ImproperReuseOfComponentsScene2Positive' },
+ { text: '场景3', title: 'reuseId分类过粗', to: 'ImproperReuseOfComponentsScene3Positive' }
]
}
]
diff --git a/ComponentReuse/positive/src/main/resources/base/profile/route_map.json b/ComponentReuse/positive/src/main/resources/base/profile/route_map.json
index e3c2818e9a0eecf4e28cc32948e648e45f30463b..15c6ca4fc92f90d395073d9f1e7d274f81077150 100644
--- a/ComponentReuse/positive/src/main/resources/base/profile/route_map.json
+++ b/ComponentReuse/positive/src/main/resources/base/profile/route_map.json
@@ -11,7 +11,7 @@
"buildFunction": "buildNoReuseScene2_StructureOnePositive"
},
{
- "name": "buildNoReuseScene2_StructureTwoPositive",
+ "name": "NoReuseScene2_StructureTwoPositive",
"pageSourceFile": "src/main/ets/pages/NoReuseScene2_StructureTwoPositive.ets",
"buildFunction": "buildNoReuseScene2_StructureTwoPositive"
},
diff --git a/SimpleChatList/README.md b/SimpleChatList/README.md
index 6cb243103ce25d8c465aeb871161a9554b095dc8..256475aca45e6fed7338f0434a75d769ca82c10a 100644
--- a/SimpleChatList/README.md
+++ b/SimpleChatList/README.md
@@ -2,11 +2,22 @@
### 介绍
-本示例基于List组件实现常见列表操作功能，主要涉及循环滚动、上拉加载、滚动到底部、左右滚动刷新、单边回弹效果、保持可见区域内容、边缘模糊效果等。
+本示例基于List组件实现常见列表操作功能，主要涉及循环滚动、上拉加载、滚动到底部、滚动到指定位置、左右滚动刷新、单边回弹效果、保持可见区域内容、边缘模糊效果等。
### 效果图预览
-
+
+
+### 使用说明
+
+1. 点击“EdgeBlur”按钮进入二级页面， 实现列表边缘模糊效果。
+2. 点击“LoopScrolling”按钮进入二级页面， 左右滑动，实现循环滚动效果。
+3. 点击“MaintainVisibleAreaContent”按钮进入二级页面， 点击“Insert Data”按钮，在显示区域上方插入数据时，实现保持可见内容位置不变的效果。
+4. 点击“PullUpLoading”按钮进入二级页面， 滑动到底部后，实现上拉加载效果。
+5. 点击“RollingMonitoring”按钮进入二级页面， 点击“scroll 200”按钮实现滚动到指定位置的效果，点击“Partial_Refresh”按钮实现局部数据刷新效果。
+6. 点击“ScrollLeftAndRightToRefresh”按钮进入二级页面， 左右滑动，实现左右滚动刷新效果。
+7. 点击“ScrollToTheBottom”按钮进入二级页面， 实现滚动到列表底部的效果。
+8. 点击“UnilateralRebound”按钮进入二级页面， 滑动到底部或顶部后，实现单边回弹效果。
### 工程目录
```
@@ -21,6 +32,7 @@
│ ├──LoopScrolling.ets // 视图层-循环滚动
│ ├──MaintainVisibleAreaContent.ets // 视图层-保持可见区域内容
│ ├──PullUpLoading.ets // 视图层-上拉加载
+│ ├──RollingMonitoring.ets // 视图层-滚动到指定位置
│ ├──ScrollLeftAndRightToRefresh.ets // 视图层-左右滚动刷新
│ ├──ScrollToTheBottom.ets // 视图层-滚动到底部
│ └──UnilateralRebound.ets // 视图层-单边回弹效果
diff --git a/SimpleChatList/entry/src/main/ets/pages/EdgeBlur.ets b/SimpleChatList/entry/src/main/ets/pages/EdgeBlur.ets
index 8eef2133098556178b2c3cfc6b38cf29cb51af60..3acd12b8b701b0e47302fa9731df520d4b895f8f 100644
--- a/SimpleChatList/entry/src/main/ets/pages/EdgeBlur.ets
+++ b/SimpleChatList/entry/src/main/ets/pages/EdgeBlur.ets
@@ -13,9 +13,9 @@
* limitations under the License.
*/
-@Entry
+
@Component
-struct EdgeBlur {
+export struct EdgeBlur {
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
@StorageProp('topRectHeight') topRectHeight: number = 0;
@@ -31,7 +31,7 @@ struct EdgeBlur {
}
build() {
- Column() {
+ NavDestination() {
List({ space: 20, initialIndex: 0 }) {
ForEach(this.arr, (item: number) => {
ListItem() {
diff --git a/SimpleChatList/entry/src/main/ets/pages/Index.ets b/SimpleChatList/entry/src/main/ets/pages/Index.ets
index 1c52ea8685c9484540fdcf75f0852e0551eede2d..84d9ae4707a62a77b6bba7942a58cf77610fc8a8 100644
--- a/SimpleChatList/entry/src/main/ets/pages/Index.ets
+++ b/SimpleChatList/entry/src/main/ets/pages/Index.ets
@@ -1,5 +1,5 @@
/*
- * Copyright (c) 2025 Huawei Device Co., Ltd.
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
@@ -13,68 +13,125 @@
* limitations under the License.
*/
-import { curves } from '@kit.ArkUI';
+import { EdgeBlur } from '../pages/EdgeBlur';
+import { LoopScrolling } from '../pages/LoopScrolling';
+import { MaintainVisibleAreaContent } from '../pages/MaintainVisibleAreaContent';
+import { PullUpLoading } from '../pages/PullUpLoading';
+import { RollingMonitoring } from '../pages/RollingMonitoring';
+import { ScrollLeftAndRightToRefresh } from '../pages/ScrollLeftAndRightToRefresh';
+import { ScrollToTheBottom } from '../pages/ScrollToTheBottom';
+import { UnilateralRebound } from '../pages/UnilateralRebound';
@Entry
@Component
struct Index {
- @State arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
- private scroller: Scroller = new Scroller();
- @StorageProp('topRectHeight') topRectHeight: number = 0;
+ @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack();
+
+ @Builder
+ PageMap(name: string, param: string) {
+ if (name === 'EdgeBlur') {
+ EdgeBlur()
+ } else if (name === 'LoopScrolling') {
+ LoopScrolling()
+ } else if (name === 'MaintainVisibleAreaContent') {
+ MaintainVisibleAreaContent()
+ } else if (name === 'PullUpLoading') {
+ PullUpLoading()
+ } else if (name === 'RollingMonitoring') {
+ RollingMonitoring()
+ } else if (name === 'ScrollLeftAndRightToRefresh') {
+ ScrollLeftAndRightToRefresh()
+ } else if (name === 'ScrollToTheBottom') {
+ ScrollToTheBottom()
+ } else if (name === 'UnilateralRebound') {
+ UnilateralRebound()
+ }
+ }
build() {
- Column() {
- // [Start Specify_Offset_Scrolling]
- Button('scroll 200')
- .height('5%')
- .onClick(() => {
- let curve = curves.interpolatingSpring(10, 1, 228, 30);
- const yOffset: number = this.scroller.currentOffset().yOffset;
- this.scroller.scrollTo({ xOffset: 0, yOffset: yOffset + 200, animation: { duration: 1000, curve: curve } })
- })
- // [End Specify_Offset_Scrolling]
+ Navigation(this.pageInfos) {
+ Column() {
+ Column({ space: 12 }) {
+ Button('EdgeBlur')
+ .width('100%')
+ .borderRadius(20)
+ .backgroundColor('#0A59F7')
+ .onClick(() => {
+ this.pageInfos.pushPathByName('EdgeBlur', '');
+ })
+
+ Button('LoopScrolling')
+ .width('100%')
+ .borderRadius(20)
+ .backgroundColor('#0A59F7')
+ .onClick(() => {
+ this.pageInfos.pushPathByName('LoopScrolling', '');
+ })
+
+ Button('MaintainVisibleAreaContent')
+ .width('100%')
+ .borderRadius(20)
+ .backgroundColor('#0A59F7')
+ .onClick(() => {
+ this.pageInfos.pushPathByName('MaintainVisibleAreaContent', '');
+ })
+
+ Button('PullUpLoading')
+ .width('100%')
+ .borderRadius(20)
+ .backgroundColor('#0A59F7')
+ .onClick(() => {
+ this.pageInfos.pushPathByName('PullUpLoading', '');
+ })
- // [Start Partial_Refresh]
- Button('Partial_Refresh')
- .height('5%')
- .margin({ top: 8, bottom: 8 })
- .onClick(() => {
- this.arr[0] += 10;
- })
- // [End Partial_Refresh]
+ Button('RollingMonitoring')
+ .width('100%')
+ .borderRadius(20)
+ .backgroundColor('#0A59F7')
+ .onClick(() => {
+ this.pageInfos.pushPathByName('RollingMonitoring', '');
+ })
- List({ space: 20, initialIndex: 0, scroller: this.scroller }) {
- ForEach(this.arr, (item: number) => {
- ListItem() {
- Text('' + item)
- .width('100%')
- .height(100)
- .fontSize(16)
- .textAlign(TextAlign.Center)
- .borderRadius(16)
- .backgroundColor(0xDCDCDC)
- }
- .borderRadius(16)
- .backgroundColor(0xDCDCDC)
- }, (item: string) => item)
+ Button('ScrollLeftAndRightToRefresh')
+ .width('100%')
+ .borderRadius(20)
+ .backgroundColor('#0A59F7')
+ .onClick(() => {
+ this.pageInfos.pushPathByName('ScrollLeftAndRightToRefresh', '');
+ })
+
+ Button('ScrollToTheBottom')
+ .width('100%')
+ .borderRadius(20)
+ .backgroundColor('#0A59F7')
+ .onClick(() => {
+ this.pageInfos.pushPathByName('ScrollToTheBottom', '');
+ })
+
+ Button('UnilateralRebound')
+ .width('100%')
+ .borderRadius(20)
+ .backgroundColor('#0A59F7')
+ .margin({ bottom: 16 })
+ .onClick(() => {
+ this.pageInfos.pushPathByName('UnilateralRebound', '');
+ })
+ }
+ .width('100%')
+ .justifyContent(FlexAlign.End)
}
- .scrollBar(BarState.Off)
- .friction(0.6)
- .contentEndOffset(60)
- // [Start Rolling_Monitoring]
- .onWillScroll(() => {
- // Trigger before scrolling component scrolling.
- console.info('currentOffset:' + this.scroller.currentOffset().yOffset)
- })
- .onDidScroll(() => {
- // Triggered when scrolling components scroll.
- console.info('currentOffset:' + this.scroller.currentOffset().yOffset)
+ .width('100%')
+ .height('100%')
+ .padding({
+ left: 16,
+ right: 16
})
- // [End Rolling_Monitoring]
- .width('90%')
+ .justifyContent(FlexAlign.End)
}
- .width('100%')
+ .title('Simple ChatList')
.height('100%')
- .padding({ top: this.getUIContext().px2vp(this.topRectHeight) })
+ .width('100%')
+ .backgroundColor('#F1F3F5')
+ .navDestination(this.PageMap)
}
}
\ No newline at end of file
diff --git a/SimpleChatList/entry/src/main/ets/pages/LoopScrolling.ets b/SimpleChatList/entry/src/main/ets/pages/LoopScrolling.ets
index b356a46ef572255db3f807dac94e8bbe01ef3aff..728d7d50cba75bb076f2df9b8eae8c9237f03a20 100644
--- a/SimpleChatList/entry/src/main/ets/pages/LoopScrolling.ets
+++ b/SimpleChatList/entry/src/main/ets/pages/LoopScrolling.ets
@@ -103,58 +103,63 @@ class MyDataSource1 extends BasicDataSource1 {
}
}
-@Entry
@Component
-struct LoopScrolling {
+export struct LoopScrolling {
private data: MyDataSource1 = new MyDataSource1();
private scroller: Scroller = new Scroller();
+ @StorageProp('topRectHeight') topRectHeight: number = 0;
aboutToAppear(): void {
for (let i = 0; i < 10; i++) {
- this.data.pushData(i.toString())
+ this.data.pushData(i.toString());
}
}
build() {
- Row() {
- List({ initialIndex: 10, scroller: this.scroller }) {
- LazyForEach(this.data, (item: string) => {
- ListItem() {
- Text(item.toString())
- .fontSize(16)
- .textAlign(TextAlign.Center)
- .size({ height: 200, width: 200 })
+ NavDestination() {
+ Row() {
+ List({ initialIndex: 10, scroller: this.scroller }) {
+ LazyForEach(this.data, (item: string) => {
+ ListItem() {
+ Text(item.toString())
+ .fontSize(16)
+ .textAlign(TextAlign.Center)
+ .size({ height: 200, width: 200 })
+ }
+ .borderRadius(16)
+ .margin(10)
+ .backgroundColor("#FFFFFF")
+
+ }, (item: string) => item)
+ }
+ .width('100%')
+ .height(221)
+ .backgroundColor('#FFDCDCDC')
+ .listDirection(Axis.Horizontal)
+ .scrollSnapAlign(ScrollSnapAlign.START)
+ .friction(2)
+ // [Start LoopScrolling]
+ .onScrollFrameBegin((offset: number, state: ScrollState) => {
+ let currentOffset = this.scroller.currentOffset().xOffset;
+ let newOffset = currentOffset + offset;
+ let totalWeight = 220 * 10; // The total width of LIST.
+ if (newOffset < totalWeight * 0.5) {
+ newOffset += totalWeight;
+ } else if (newOffset > totalWeight * 2.5) {
+ newOffset -= totalWeight;
}
- .borderRadius(16)
- .margin(10)
- .backgroundColor("#FFFFFF")
+ return { offsetRemain: newOffset - currentOffset };
+ })
- }, (item: string) => item)
+ // [End LoopScrolling]
}
.width('100%')
- .height(221)
- .backgroundColor('#FFDCDCDC')
- .listDirection(Axis.Horizontal)
- .scrollSnapAlign(ScrollSnapAlign.START)
- .friction(2)
- // [Start LoopScrolling]
- .onScrollFrameBegin((offset: number, state: ScrollState) => {
- let currentOffset = this.scroller.currentOffset().xOffset;
- let newOffset = currentOffset + offset;
- let totalWeight = 220 * 10; // The total width of LIST.
- if (newOffset < totalWeight * 0.5) {
- newOffset += totalWeight;
- } else if (newOffset > totalWeight * 2.5) {
- newOffset -= totalWeight;
- }
- return { offsetRemain: newOffset - currentOffset };
- })
-
- // [End LoopScrolling]
+ .height('100%')
+ .alignItems(VerticalAlign.Center)
+ .justifyContent(FlexAlign.Center)
}
.width('100%')
.height('100%')
- .alignItems(VerticalAlign.Center)
- .justifyContent(FlexAlign.Center)
+ .padding({ top: this.getUIContext().px2vp(this.topRectHeight) })
}
}
\ No newline at end of file
diff --git a/SimpleChatList/entry/src/main/ets/pages/MaintainVisibleAreaContent.ets b/SimpleChatList/entry/src/main/ets/pages/MaintainVisibleAreaContent.ets
index 3cd42e26729e5a667da2e43f16e345611e281e04..055a10edf6caf50e21aed800349a7159c11b2402 100644
--- a/SimpleChatList/entry/src/main/ets/pages/MaintainVisibleAreaContent.ets
+++ b/SimpleChatList/entry/src/main/ets/pages/MaintainVisibleAreaContent.ets
@@ -104,9 +104,8 @@ class TextClass {
}
}
-@Entry
@Component
-struct MaintainVisibleAreaContent {
+export struct MaintainVisibleAreaContent {
private data: MyDataSource = new MyDataSource();
@StorageProp('topRectHeight') topRectHeight: number = 0;
@@ -117,33 +116,37 @@ struct MaintainVisibleAreaContent {
}
build() {
- Stack() {
- // [Start MaintainVisibleAreaContent]
- List({ space: 3 }) {
- LazyForEach(this.data, (item: TextClass) => {
- ListItem() {
- Row() {
- Text(item.message).fontSize(20)
+ NavDestination() {
+ Stack() {
+ // [Start MaintainVisibleAreaContent]
+ List({ space: 3 }) {
+ LazyForEach(this.data, (item: TextClass) => {
+ ListItem() {
+ Row() {
+ Text(item.message).fontSize(20)
+ }
+ .height(50)
+ .margin({ left: 10, right: 10 })
}
- .height(50)
- .margin({ left: 10, right: 10 })
- }
- }, (item: TextClass) => JSON.stringify(item))
+ }, (item: TextClass) => JSON.stringify(item))
+ }
+ .width('100%')
+ .height('100%')
+ .scrollBar(BarState.Off)
+ .maintainVisibleContentPosition(true)
+
+ // [End MaintainVisibleAreaContent]
+
+ Button('Insert Data')
+ .onClick(() => {
+ this.data.addData(0, new TextClass('Hello -1'));
+ this.data.addData(0, new TextClass('Hello -2'));
+ this.data.addData(0, new TextClass('Hello -3'));
+ })
}
- .width('100%')
- .height('100%')
- .scrollBar(BarState.Off)
- .maintainVisibleContentPosition(true)
-
- // [End MaintainVisibleAreaContent]
-
- Button('Insert Data')
- .onClick(() => {
- this.data.addData(0, new TextClass('Hello -1'));
- this.data.addData(0, new TextClass('Hello -2'));
- this.data.addData(0, new TextClass('Hello -3'));
- })
}
+ .width('100%')
+ .height('100%')
.padding({ top: this.getUIContext().px2vp(this.topRectHeight) })
}
}
\ No newline at end of file
diff --git a/SimpleChatList/entry/src/main/ets/pages/PullUpLoading.ets b/SimpleChatList/entry/src/main/ets/pages/PullUpLoading.ets
index 84b3f16d8452deba56ca21e415ed9baf5702cade..b6a9fe773c20ce8af47936a6e1cc01d9b8f560b7 100644
--- a/SimpleChatList/entry/src/main/ets/pages/PullUpLoading.ets
+++ b/SimpleChatList/entry/src/main/ets/pages/PullUpLoading.ets
@@ -13,9 +13,8 @@
* limitations under the License.
*/
-@Entry
@Component
-struct PullUpLoading {
+export struct PullUpLoading {
@State arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
@State isRefreshing: boolean = false;
@State refreshOffset: number = 0;
@@ -39,60 +38,65 @@ struct PullUpLoading {
}
build() {
- Refresh({ refreshing: $$this.isRefreshing, builder: this.refreshBuilder }) {
- // [StartExclude PullToRefresh]
- // [Start PullUpLoading]
- List({ space: 20 }) {
- ForEach(this.arr, (item: number) => {
+ NavDestination() {
+ Refresh({ refreshing: $$this.isRefreshing, builder: this.refreshBuilder }) {
+ // [StartExclude PullToRefresh]
+ // [Start PullUpLoading]
+ List({ space: 20 }) {
+ ForEach(this.arr, (item: number) => {
+ ListItem() {
+ Text('' + item)
+ .width('100%')
+ .height(100)
+ .fontSize(16)
+ .textAlign(TextAlign.Center)
+ .borderRadius(16)
+ .backgroundColor(0xDCDCDC)
+ }
+ }, (item: string) => item)
ListItem() {
- Text('' + item)
- .width('100%')
- .height(100)
- .fontSize(16)
- .textAlign(TextAlign.Center)
- .borderRadius(16)
- .backgroundColor(0xDCDCDC)
- }
- }, (item: string) => item)
- ListItem() {
- Row() {
- LoadingProgress().height(32).width(48)
- Text('加载中')
+ Row() {
+ LoadingProgress().height(32).width(48)
+ Text('加载中')
+ }
}
+ .width('100%')
+ .height(64)
}
- .width('100%')
- .height(64)
+ .width('90%')
+ .onScrollIndex((start: number, end: number) => {
+ if (end > this.arr.length) {
+ setTimeout(() => {
+ for (let i = 0; i < 5; i++) {
+ this.arr.push(this.arr.length);
+ }
+ })
+ }
+ })
+ // [End PullUpLoading]
+ .onAreaChange((oldValue: Area, newValue: Area) => {
+ this.refreshOffset = newValue.position.y as number;
+ })
+ .scrollBar(BarState.Off)
+ .divider({ strokeWidth: '1px' })
}
- .width('90%')
- .onScrollIndex((start: number, end: number) => {
- if (end > this.arr.length) {
- setTimeout(() => {
- for (let i = 0; i < 5; i++) {
- this.arr.push(this.arr.length);
- }
- })
- }
+ .width('100%')
+ .height('100%')
+ .padding({ top: this.getUIContext().px2vp(this.topRectHeight) })
+ .onStateChange((state: RefreshStatus) => {
+ this.refreshState = state;
})
- // [End PullUpLoading]
- .onAreaChange((oldValue: Area, newValue: Area) => {
- this.refreshOffset = newValue.position.y as number;
+ // [EndExclude PullToRefresh]
+ .onRefreshing(() => {
+ setTimeout(() => {
+ this.isRefreshing = false;
+ }, 2000)
})
- .scrollBar(BarState.Off)
- .divider({ strokeWidth: '1px' })
+
+ // [End PullToRefresh]
}
.width('100%')
.height('100%')
.padding({ top: this.getUIContext().px2vp(this.topRectHeight) })
- .onStateChange((state: RefreshStatus) => {
- this.refreshState = state;
- })
- // [EndExclude PullToRefresh]
- .onRefreshing(() => {
- setTimeout(() => {
- this.isRefreshing = false;
- }, 2000)
- })
-
- // [End PullToRefresh]
}
}
\ No newline at end of file
diff --git a/SimpleChatList/entry/src/main/ets/pages/RollingMonitoring.ets b/SimpleChatList/entry/src/main/ets/pages/RollingMonitoring.ets
new file mode 100644
index 0000000000000000000000000000000000000000..04915270abb430f3b992b3086525494ea431b794
--- /dev/null
+++ b/SimpleChatList/entry/src/main/ets/pages/RollingMonitoring.ets
@@ -0,0 +1,79 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { curves } from '@kit.ArkUI';
+
+@Component
+export struct RollingMonitoring {
+ @State arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+ private scroller: Scroller = new Scroller();
+ @StorageProp('topRectHeight') topRectHeight: number = 0;
+
+ build() {
+ NavDestination() {
+ // [Start Specify_Offset_Scrolling]
+ Button('scroll 200')
+ .height('5%')
+ .onClick(() => {
+ let curve = curves.interpolatingSpring(10, 1, 228, 30);
+ const yOffset: number = this.scroller.currentOffset().yOffset;
+ this.scroller.scrollTo({ xOffset: 0, yOffset: yOffset + 200, animation: { duration: 1000, curve: curve } })
+ })
+ // [End Specify_Offset_Scrolling]
+
+ // [Start Partial_Refresh]
+ Button('Partial_Refresh')
+ .height('5%')
+ .margin({ top: 8, bottom: 8 })
+ .onClick(() => {
+ this.arr[0] += 10;
+ })
+ // [End Partial_Refresh]
+
+ List({ space: 20, initialIndex: 0, scroller: this.scroller }) {
+ ForEach(this.arr, (item: number) => {
+ ListItem() {
+ Text('' + item)
+ .width('100%')
+ .height(100)
+ .fontSize(16)
+ .textAlign(TextAlign.Center)
+ .borderRadius(16)
+ .backgroundColor(0xDCDCDC)
+ }
+ .borderRadius(16)
+ .backgroundColor(0xDCDCDC)
+ }, (item: string) => item)
+ }
+ .scrollBar(BarState.Off)
+ .friction(0.6)
+ .contentEndOffset(60)
+ // [Start Rolling_Monitoring]
+ .onWillScroll(() => {
+ // Trigger before scrolling component scrolling.
+ console.info('currentOffset:' + this.scroller.currentOffset().yOffset)
+ })
+ .onDidScroll(() => {
+ // Triggered when scrolling components scroll.
+ console.info('currentOffset:' + this.scroller.currentOffset().yOffset)
+ })
+ // [End Rolling_Monitoring]
+ .width('90%')
+ }
+ .width('100%')
+ .height('100%')
+ .padding({ top: this.getUIContext().px2vp(this.topRectHeight) })
+ }
+}
\ No newline at end of file
diff --git a/SimpleChatList/entry/src/main/ets/pages/ScrollLeftAndRightToRefresh.ets b/SimpleChatList/entry/src/main/ets/pages/ScrollLeftAndRightToRefresh.ets
index 3facf7832cee4f619662b748f6bd70462a4b2c3b..cf0de8ba5e20573ba09397d01b3023f71ce23834 100644
--- a/SimpleChatList/entry/src/main/ets/pages/ScrollLeftAndRightToRefresh.ets
+++ b/SimpleChatList/entry/src/main/ets/pages/ScrollLeftAndRightToRefresh.ets
@@ -13,66 +13,71 @@
* limitations under the License.
*/
-@Entry
@Component
-struct ScrollLeftAndRightToRefresh {
+export struct ScrollLeftAndRightToRefresh {
@State isRefreshing: boolean = false;
@State arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+ @StorageProp('topRectHeight') topRectHeight: number = 0;
build() {
- // [Start ScrollLeftAndRightToRefresh]
- Column() {
- Refresh({ refreshing: $$this.isRefreshing }) {
- List({ space: 10 }) {
- ForEach(this.arr, (item: number) => {
- ListItem() {
- Text('' + item)
- .width(300)
- .height(80)
- .fontSize(16)
- .textAlign(TextAlign.Center)
- .borderRadius(16)
- .backgroundColor(0xFFFFFF)
- .translate({ x: (80 - 300) / 2 })
- .rotate({
- x: 0,
- y: 0,
- z: 1,
- centerX: '50%',
- centerY: '50%',
- angle: 90
- })
- }
- .width(80)
- .height(300)
- }, (item: string) => item)
+ NavDestination() {
+ // [Start ScrollLeftAndRightToRefresh]
+ Column() {
+ Refresh({ refreshing: $$this.isRefreshing }) {
+ List({ space: 10 }) {
+ ForEach(this.arr, (item: number) => {
+ ListItem() {
+ Text('' + item)
+ .width(300)
+ .height(80)
+ .fontSize(16)
+ .textAlign(TextAlign.Center)
+ .borderRadius(16)
+ .backgroundColor(0xFFFFFF)
+ .translate({ x: (80 - 300) / 2 })
+ .rotate({
+ x: 0,
+ y: 0,
+ z: 1,
+ centerX: '50%',
+ centerY: '50%',
+ angle: 90
+ })
+ }
+ .width(80)
+ .height(300)
+ }, (item: string) => item)
+ }
+ .width(300)
+ .height(300)
+ .alignListItem(ListItemAlign.Center)
+ .scrollBar(BarState.Off)
}
- .width(300)
- .height(300)
- .alignListItem(ListItemAlign.Center)
- .scrollBar(BarState.Off)
+ .onRefreshing(() => {
+ setTimeout(() => {
+ this.isRefreshing = false;
+ }, 2000)
+ })
+ .backgroundColor(0xDCDCDC)
+ .refreshOffset(64)
+ .pullToRefresh(true)
}
- .onRefreshing(() => {
- setTimeout(() => {
- this.isRefreshing = false;
- }, 2000)
+ .justifyContent(FlexAlign.Center)
+ .width('100%')
+ .height('100%')
+ .rotate({
+ x: 0,
+ y: 0,
+ z: 1,
+ centerX: '50%',
+ centerY: '50%',
+ angle: -90
})
- .backgroundColor(0xDCDCDC)
- .refreshOffset(64)
- .pullToRefresh(true)
+
+ // [End ScrollLeftAndRightToRefresh]
}
- .justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
- .rotate({
- x: 0,
- y: 0,
- z: 1,
- centerX: '50%',
- centerY: '50%',
- angle: -90
- })
-
- // [End ScrollLeftAndRightToRefresh]
+ .padding({ top: this.getUIContext().px2vp(this.topRectHeight) })
}
}
\ No newline at end of file
diff --git a/SimpleChatList/entry/src/main/ets/pages/ScrollToTheBottom.ets b/SimpleChatList/entry/src/main/ets/pages/ScrollToTheBottom.ets
index 3d4d75a3c38dce7abc46ed4c0c1e65022332a686..dec8817e820b772bd3c441e99ce56b6fb1e43ac3 100644
--- a/SimpleChatList/entry/src/main/ets/pages/ScrollToTheBottom.ets
+++ b/SimpleChatList/entry/src/main/ets/pages/ScrollToTheBottom.ets
@@ -13,9 +13,8 @@
* limitations under the License.
*/
-@Entry
@Component
-struct ScrollToTheBottom {
+export struct ScrollToTheBottom {
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
// [Start Scroller]
private scroller: Scroller = new Scroller();
@@ -24,7 +23,7 @@ struct ScrollToTheBottom {
// [StartExclude Scroller]
build() {
- Column() {
+ NavDestination() {
// [EndExclude Scroller]
// [Start initialIndex]
List({ space: 20, initialIndex: this.arr.length - 1, scroller: this.scroller }) {
diff --git a/SimpleChatList/entry/src/main/ets/pages/UnilateralRebound.ets b/SimpleChatList/entry/src/main/ets/pages/UnilateralRebound.ets
index f68103f115b54e107915cd4ca695f9d6f211c915..cc557898bc89441c1026e12829fdbb5e67534db6 100644
--- a/SimpleChatList/entry/src/main/ets/pages/UnilateralRebound.ets
+++ b/SimpleChatList/entry/src/main/ets/pages/UnilateralRebound.ets
@@ -13,16 +13,15 @@
* limitations under the License.
*/
-@Entry
@Component
-struct UnilateralRebound {
+export struct UnilateralRebound {
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
private scroller: Scroller = new Scroller();
private isTop: boolean = true;
@StorageProp('topRectHeight') topRectHeight: number = 0;
build() {
- Column() {
+ NavDestination() {
// [Start UnilateralRebound]
List({ space: 20, initialIndex: 0, scroller: this.scroller }) {
// [StartExclude UnilateralRebound]
diff --git a/SimpleChatList/entry/src/main/resources/base/element/string.json b/SimpleChatList/entry/src/main/resources/base/element/string.json
index f94595515a99e0c828807e243494f57f09251930..b59dc3f91cfc952ea6a842d4a3c279dedf6eb808 100644
--- a/SimpleChatList/entry/src/main/resources/base/element/string.json
+++ b/SimpleChatList/entry/src/main/resources/base/element/string.json
@@ -10,7 +10,7 @@
},
{
"name": "EntryAbility_label",
- "value": "label"
+ "value": "Simple ChatList"
}
]
}
\ No newline at end of file
diff --git a/SimpleChatList/entry/src/main/resources/base/profile/main_pages.json b/SimpleChatList/entry/src/main/resources/base/profile/main_pages.json
index bd3e8ac7cf440b5de25dc227242469add843f1a1..1898d94f58d6128ab712be2c68acc7c98e9ab9ce 100644
--- a/SimpleChatList/entry/src/main/resources/base/profile/main_pages.json
+++ b/SimpleChatList/entry/src/main/resources/base/profile/main_pages.json
@@ -1,12 +1,5 @@
{
"src": [
- "pages/Index",
- "pages/EdgeBlur",
- "pages/MaintainVisibleAreaContent",
- "pages/LoopScrolling",
- "pages/PullUpLoading",
- "pages/ScrollLeftAndRightToRefresh",
- "pages/ScrollToTheBottom",
- "pages/UnilateralRebound"
+ "pages/Index"
]
}
diff --git a/SimpleChatList/screenshots/device/effect.jpg b/SimpleChatList/screenshots/device/effect.jpg
deleted file mode 100644
index 9e3b344cd34b6a76de7c6fe6e449d97579462134..0000000000000000000000000000000000000000
Binary files a/SimpleChatList/screenshots/device/effect.jpg and /dev/null differ
diff --git a/SimpleChatList/screenshots/device/effect.png b/SimpleChatList/screenshots/device/effect.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e8f9aa4c4972671f413c896d27b0975bd69b0a8
Binary files /dev/null and b/SimpleChatList/screenshots/device/effect.png differ