diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/list4.gif b/zh-cn/application-dev/reference/arkui-ts/figures/list4.gif
new file mode 100644
index 0000000000000000000000000000000000000000..d28ffc0be07801b3b8a3050cab0b5c95f6ffda01
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/list4.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md
index bb5c8f82db42c01269bf457a2ab515e16551378a..88d81d1ed2e3452ae5a5cd246095b62a2bb27578 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md
@@ -324,3 +324,50 @@ struct ListExample{
 ```
 
 ![list](figures/list3.gif)
+
+### 示例4
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct ListExample {
+  private arr: number[] = Array.apply(this, {length: 20}).map((item, i) => i)
+  private scrollerForList: Scroller = new Scroller()
+
+  build() {
+    Column() {
+      Row() {
+        List({ space: 20, initialIndex: 0, scroller: this.scrollerForList }) {
+          ForEach(this.arr, (item) => {
+            ListItem() {
+              Text('' + item)
+                .width('100%').height(100).fontSize(16)
+                .textAlign(TextAlign.Center)
+            }
+            .borderRadius(10).backgroundColor(0xFFFFFF)
+            .width('60%')
+            .height('80%')
+          }, item => item)
+        }
+        .chainAnimation(true)
+        .edgeEffect(EdgeEffect.Spring)
+        .listDirection(Axis.Horizontal)
+        .height('100%')
+        .width('100%')
+        .scrollSnapAlign(ScrollSnapAlign.CENTER)
+        .borderRadius(10)
+        .backgroundColor(0xDCDCDC)
+        .listDirection(Axis.Horizontal)
+        .width('100%')
+      }
+      .width('100%')
+      .height('100%')
+      .backgroundColor(0xDCDCDC)
+      .padding({ top: 10})
+    }
+  }
+}
+```
+
+![list](figures/list4.gif)
\ No newline at end of file