diff --git a/VisibleComponent/entry/src/main/ets/pages/Index.ets b/VisibleComponent/entry/src/main/ets/pages/Index.ets
index 0e2ee81e17b7079d364d5a0cf5f83a03472da5df..029d16389e793c3d4928aad351ebf1cb1b5d7361 100644
--- a/VisibleComponent/entry/src/main/ets/pages/Index.ets
+++ b/VisibleComponent/entry/src/main/ets/pages/Index.ets
@@ -13,15 +13,15 @@
 * limitations under the License.
 */
 
-// DocsCode 1
 import { apng, ApngController } from '@ohos/apng';
+import { hilog } from '@kit.PerformanceAnalysisKit';
 
 @Entry
 @Component
 struct RefreshExample {
   @State isRefreshing: boolean = false;
   @State isRunning: boolean = false;
-  @State arr: string[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
+  @State arr: String[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
   controller: ApngController = new ApngController();
 
   @Builder
@@ -66,9 +66,6 @@ struct RefreshExample {
             }
           }, (item: string) => item)
         }
-        .onScrollIndex((first: number) => {
-          console.info(first.toString());
-        })
         .width('100%')
         .height('100%')
         .alignListItem(ListItemAlign.Center)
@@ -77,27 +74,26 @@ struct RefreshExample {
       .backgroundColor(0x89CFF0)
       .pullToRefresh(true)
       .refreshOffset(64)
-      // Use onStateChange and apngcontroller to control play and stop
+      //Use OnStateChange and apngcontroller to control play and stop
       .onStateChange((refreshStatus: RefreshStatus) => {
         if (refreshStatus >= 1 && refreshStatus < 4) {
           this.controller.play();
         } else {
           this.controller.stop();
         }
-        console.info('Refresh onStatueChange state is ' + refreshStatus);
+        hilog.info(0x0000, 'testTag', 'Refresh onStatueChange state is ' + refreshStatus)
       })
+
       .onRefreshing(() => {
         setTimeout(() => {
-          this.isRefreshing = false;
+          this.isRefreshing = false
         }, 2000)
-        console.log('onRefreshing test')
+        hilog.info(0x0000, 'testTag', 'onRefreshing test')
       })
     }
   }
 }
-// DocsCode 1
 
-// DocsCode 2
 @Component
 struct ImageAnimatorTest {
   private uid: number = -1;
@@ -108,12 +104,13 @@ struct ImageAnimatorTest {
   // Method 1: use aboutToAppear to register a setOnVisibleAreaApproximateChange
   aboutToAppear(): void {
     this.uid = this.getUniqueId();
-    console.log(`getUniqueId in ImageAnimatorTest aboutAppear is ${this.uid}`);
+    hilog.info(0x0000, 'testTag', `getUniqueId in ImageAnimatorTest aboutToAppear is ${this.uid}`);
     let node = this.getUIContext().getFrameNodeByUniqueId(this.uid);
     node?.commonEvent.setOnVisibleAreaApproximateChange(
       { ratios: [0], expectedUpdateInterval: 500 },
       (isVisible, currentRatio) => {
-        console.log(`Method aboutToAppear: setOnVisibleAreaApproximateChange isVisible:${isVisible}, currentRatio:${currentRatio}`);
+        hilog.info(0x0000, 'testTag',
+          `Method aboutToAppear: setOnVisibleAreaApproximateChange isVisible:${isVisible}, currentRatio:${currentRatio}`);
         this.running = isVisible;
       })
   }
@@ -122,38 +119,41 @@ struct ImageAnimatorTest {
     Column() {
       ImageAnimator()
         .images([
-          { src: $r('app.media.background') },
-          { src: $r('app.media.foreground') }
+          {
+            src: $r('app.media.background')
+          },
+          {
+            src: $r('app.media.foreground')
+          }
         ])
-        .id(`ImageAnimator${this.index}}`)
+        .id(`ImageAnimator${this.index}`)
         .width('100%')
         .height('30%')
         .duration(3000)
         .fillMode(FillMode.None)
         .iterations(-1)
-        .state(this.running ? AnimationStatus.Running : AnimationStatus.Paused)
-        // Method 2: Directly use onVisibleAreaChange
+        .state(this.running ? AnimationStatus.Running :
+        AnimationStatus.Paused)// Method 2: Directly use onVisibleAreaChange
         .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
-          console.log(`Method Direct: onVisibleAreaChange isVisible:${isVisible}, currentRatio:${currentRatio}`);
+          hilog.info(0x0000, 'testTag',
+            `Method Direct: onVisibleAreaChange isVisible:${isVisible}, currentRatio:${currentRatio}`);
           if (isVisible && currentRatio >= 1.0) {
             this.running = true;
           }
           if (!isVisible && currentRatio <= 0.0) {
             this.running = false;
           }
-        })
-        // Method 3: use onAppear to register a setOnVisibleAreaApproximateChange
+        })// Method 3: use onAppear to register a setOnVisibleAreaApproximateChange
         .onAppear(() => {
           let node = this.getUIContext().getFrameNodeById(`ImageAnimator${this.index}`);
           node?.commonEvent.setOnVisibleAreaApproximateChange(
             { ratios: [0], expectedUpdateInterval: 500 },
             (isVisible, currentRatio) => {
               this.running = isVisible;
-              console.log(`Method onAppear: setOnVisibleAreaApproximateChange isVisible:${isVisible}, currentRatio:${currentRatio}`);
-            }
-          )
+              hilog.info(0x0000, 'testTag',
+                `Method onAppear: setOnVisibleAreaApproximateChange isVisible:${isVisible}, currentRatio:${currentRatio}`);
+            })
         })
     }
   }
-}
-// DocsCode 2
\ No newline at end of file
+}
\ No newline at end of file