!20685 FIX：补充swiper组件 api 接口使用示例

Merge pull request !20685 from sunjiakun/swiper0710

zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md

@@ -162,6 +162,7 @@ finishAnimation(callback?: () => void): void
 
 ## 示例
 
+### 示例1
 ```ts
 // xxx.ets
 class MyDataSource implements IDataSource {
@@ -261,3 +262,163 @@ struct SwiperExample {
 ```
 
 ![swiper](figures/swiper.gif)
+
+### 示例2
+```ts
+// xxx.ets
+class MyDataSource implements IDataSource {
+  private list: number[] = []
+  private listener: DataChangeListener
+
+  constructor(list: number[]) {
+    this.list = list
+  }
+
+  totalCount(): number {
+    return this.list.length
+  }
+
+  getData(index: number): any {
+    return this.list[index]
+  }
+
+  registerDataChangeListener(listener: DataChangeListener): void {
+    this.listener = listener
+  }
+
+  unregisterDataChangeListener() {
+  }
+}
+
+@Entry
+@Component
+struct SwiperExample {
+  private swiperController: SwiperController = new SwiperController()
+  private data: MyDataSource = new MyDataSource([])
+
+  aboutToAppear(): void {
+    let list = []
+    for (var i = 1; i <= 10; i++) {
+      list.push(i.toString());
+    }
+    this.data = new MyDataSource(list)
+  }
+
+  build() {
+    Column({ space: 5 }) {
+      Swiper(this.swiperController) {
+        LazyForEach(this.data, (item: string) => {
+          Text(item).width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(30)
+        }, item => item)
+      }
+      .cachedCount(2)
+      .index(1)
+      .autoPlay(true)
+      .interval(4000)
+      .indicator(Indicator.dot()
+        .itemWidth(15)
+        .itemHeight(15)
+        .selectedItemWidth(15)
+        .selectedItemHeight(15)
+        .color(Color.Gray)
+        .selectedColor(Color.Blue))
+      .loop(true)
+      .duration(1000)
+      .itemSpace(0)
+      .displayArrow(true,true)
+      Row({ space: 12 }) {
+        Button('showNext')
+          .onClick(() => {
+            this.swiperController.showNext()
+          })
+        Button('showPrevious')
+          .onClick(() => {
+            this.swiperController.showPrevious()
+          })
+      }.margin(5)
+    }.width('100%')
+    .margin({ top: 5 })
+  }
+}
+```
+![swiper](figures/swiper-dot.gif)
+
+### 示例3
+```ts
+// xxx.ets
+class MyDataSource implements IDataSource {
+  private list: number[] = []
+  private listener: DataChangeListener
+
+  constructor(list: number[]) {
+    this.list = list
+  }
+
+  totalCount(): number {
+    return this.list.length
+  }
+
+  getData(index: number): any {
+    return this.list[index]
+  }
+
+  registerDataChangeListener(listener: DataChangeListener): void {
+    this.listener = listener
+  }
+
+  unregisterDataChangeListener() {
+  }
+}
+
+@Entry
+@Component
+struct SwiperExample {
+  private swiperController: SwiperController = new SwiperController()
+  private data: MyDataSource = new MyDataSource([])
+
+  aboutToAppear(): void {
+    let list = []
+    for (var i = 1; i <= 10; i++) {
+      list.push(i.toString());
+    }
+    this.data = new MyDataSource(list)
+  }
+
+  build() {
+    Column({ space: 5 }) {
+      Swiper(this.swiperController) {
+        LazyForEach(this.data, (item: string) => {
+          Text(item).width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(30)
+        }, item => item)
+      }
+      .cachedCount(2)
+      .index(1)
+      .autoPlay(true)
+      .interval(4000)
+      .indicator(Indicator.digit()
+        .right(130)
+        .top(200)
+        .fontColor(Color.Gray)
+        .selectedFontColor(Color.Gray)
+        .digitFont({size:20,weight:FontWeight.Bold})
+        .selectedDigitFont({size:20,weight:FontWeight.Normal}))
+      .loop(true)
+      .duration(1000)
+      .itemSpace(0)
+      .displayArrow(true,false)
+      Row({ space: 12 }) {
+        Button('showNext')
+          .onClick(() => {
+            this.swiperController.showNext()
+          })
+        Button('showPrevious')
+          .onClick(() => {
+            this.swiperController.showPrevious()
+          })
+      }.margin(5)
+    }.width('100%')
+    .margin({ top: 5 })
+  }
+}
+```
+![swiper](figures/swiper-digit.gif)
\ No newline at end of file