update zh-cn/third-party-cases/interact-lists.md.

Signed-off-by: Nduangavin123 <duanxichao@huawei.com>
Signed-off-by: Nduangavin123 <duanxichao@huawei.com>

zh-cn/third-party-cases/interact-lists.md

 # 二级联动
 ## 场景介绍
-列表的二级联动（Cascading List）是指根据一个列表（一级列表）的选择结果，来更新另一个列表（二级列表）的选项。这种联动可以使用户根据实际需求，快速定位到想要的选项，提高交互体验。例如，短视频中拍摄风格的选择、照片编辑时的场景的选择，本文即为大家介绍这种联动。
+列表的二级联动（Cascading List）是指根据一个列表（一级列表）的选择结果，来更新另一个列表（二级列表）的选项。这种联动可以使用户根据实际需求，快速定位到想要的选项，提高交互体验。例如，短视频中拍摄风格的选择、照片编辑时的场景的选择，本文即为大家介绍如何开发二级联动。
 ## 效果呈现
 本例最终效果如下：
 
@@ -11,18 +11,18 @@
 - IDE: DevEco Studio 3.1 Beta2
 - SDK: Ohos_sdk_public 3.2.11.9 (API Version 9 Release)
 ## 实现思路
-- 类型标题(titles)以及下方的图片列表(contents)分组展示：通过List组件显示类型标题
-- 滑动点击类型标题列表，下方图片列表也会随之变动：通过List组件的onScrollIndex事件获取到不同类型标题的在图片列表中的与之对应的索引已达到图片列表的变动，且通过Line组件为选中的标题添加下划线
-- 滑动或点击下方列表中的图片，上方的被选中的类型标题也发生变化：首先判断点击或者滑动到最左边图片的索引，判断该图片所属类型，根据各个类型图片中首张图片的索引进行比较，确定其索引值，最后与标题(titles)相匹配已达到标题列表的变动
+- 数字标题(titles)以及下方的数字列表(contents)分组展示：通过两个List组件分别承载数字标题和数字项。
+- 滚动数字列表，上方数字标题也随之变动：通过List组件的onScrollIndex事件获取到当前滚动数字的索引，根据该索引计算出对应标题数字的索引，然后通过Scroller的scrollToIndex方法跳转到对应的数字标题，且通过Line组件为选中的标题添加下划线。
+- 点击数字标题，下方的数字列表也随之变化：首先获取到点击数字标题的索引，通过该索引计算出下方对应数字的起始项索引，然后通过scroller的scrollToIndex方法跳转到对应索引的数字项。
 
 ## 开发步骤
-根据上述特性，具体实现步骤如下：
-1. 首先ts构建列表数据，并且各个类型标题中首张图片的索引提前整理，具体代码块如下：
+根据实现思路，具体实现步骤如下：
+1. 首先构建列表数据，在records中记录数字列表中各个数字的首项索引值，具体代码块如下：
     ```ts
     ...
     @State typeIndex: number = 0
     private tmp: number = 0
-    private titles: Array<string> = ["中国风", "旅游", "春日限定", "复古滤镜", "精选", "油画", "电影", "胶片自由", "运动生活"]
+    private titles: Array<string> = ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
     private contents: Array<string> = ["1", "1", "1", "1", "1", "1", "1", "1", "1", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "3"
         , "3", "3", "3", "3", "4", "4", "4", "5", "5", "5", "5", "5", "6", "7", "7", "7", "7", "7", "7", "7", "7", "7", "7", "7", "7",
         "8", "8", "8", "8", "8", "9", "9", "9", "9", "9", "9", "9", "9", "9", "9", "9"]
@@ -31,7 +31,7 @@
     private scroller: Scroller = new Scroller();
     ...
     ```
-    类型标题列表：具体代码块如下：
+    数字标题列表：具体代码块如下：
     ```ts
     ...
     build() {
@@ -53,7 +53,7 @@
       }
     }
     ```
-    图片列表，具体代码块如下：
+    数字列表，具体代码块如下：
     ```ts
     List({ space: 20, scroller: this.scroller }) {
       ForEach(this.contents, (item, index) => {
@@ -72,7 +72,7 @@
     .listDirection(Axis.Horizontal) //列表排列方向水平
     .edgeEffect(EdgeEffect.None) //不支持滑动效果
     ```
-2. 图片的索引值判断，并通过返回值返回到各类型标题的首张图片的索引，具体代码块如下：
+2. 数字标题的索引值判断，根据当前滚动数字的首项索引值计算出数字标题的索引，具体代码块如下：
     ```ts
     ...
     findClassIndex(ind: number) { // 当前界面最左边图的索引值ind
@@ -107,7 +107,7 @@
     }
     ...
     ```
-3. 类型标题的滑动导致图片列表的变动：通过onClick事件获取的与类型标题相对应首张图片的索引值，使图片列表进行变动，具体代码块如下：
+3. 点击数字标题，数字列表随之滑动：首先获取到点击数字标题的索引，通过该索引计算出下方对应数字的起始项索引，然后通过scroller的scrollToIndex方法跳转到对应索引的数字项，具体代码块如下：
     ```ts
     ...
     .onClick(() => {
@@ -119,7 +119,7 @@
     })
     ...
     ```
-4. 图片列表的滑动或点击导致类型标题列表的变动：通过List组件中onScrollIndex事件获取的到屏幕中最左边图片的索引值，然后通过索引值的判断进行类型标题的确认，以达到类型标题列表的变动，具体代码块如下：
+4. 数字列表的滑动或点击导致数字标题的变动：通过List组件中onScrollIndex事件获取的到屏幕中最左边数字的索引值start，然后通过该索引值计算出对应的数字标题的索引currentClassIndex，然后通过scrollToIndex控制数字标题跳转到对应索引处，具体代码块如下：
     ```ts
     ...
     .onScrollIndex((start) => {
@@ -150,7 +150,7 @@ struct TwoLevelLink {
   private records: Array<number> = [0, 9, 21, 26, 29, 34, 35, 47, 52, 63]
   private classifyScroller: Scroller = new Scroller();
   private scroller: Scroller = new Scroller();
-  // 同类型首张图片的索引
+  // 根据数字列表索引计算对应数字标题的索引
   findClassIndex(ind: number) {
     let ans = 0
     for (let i = 0; i < this.records.length; i++) {
@@ -161,6 +161,7 @@ struct TwoLevelLink {
     }
     return ans
   }
+  // 根据数字标题索引计算对应数字列表的索引
   findItemIndex(ind: number) {
     return this.records[ind]
   }