@shijiu/jsview-vue 0.9.302 → 0.9.311-alpha.0

package/utils/JsViewEngineWidget/SimpleWidget/SimpleWidget.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2021-09-22 16:08:58
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-12-28 16:08:15
+ * @LastEditTime: 2022-01-13 12:14:00
  * @Description: file content
 -->
 
@@ -35,6 +35,8 @@
                                           width: item的宽,
                                           height: item的高,
                                           focusable: item是否可以获得焦点,
+                                          marginBottom: item的下方margin,
+                                          marginRight: item的右方margin,
                                         }
  *
  *      onClick {function} item点击回调
@@ -109,6 +111,7 @@ const _getPadding = function (padding) {
   }
   return result;
 };
+
 const _AddTemplateItem = function (
   data,
   measure_func,
@@ -121,6 +124,7 @@ const _AddTemplateItem = function (
   }
   template_parser.CalculateNeighborWhenAddStop();
 };
+
 const _getTemplateParser = function (width, height, direction, p) {
   let padding = _getPadding(p);
   let line_max =
@@ -130,6 +134,27 @@ const _getTemplateParser = function (width, height, direction, p) {
   return new TemplateParser(direction, line_max, "relative", width, height);
 };
 
+// direction key 是 vertical 的值
+const directionFreeKeyMap = {
+  pos: {
+    true: "yPos",
+    false: "xPos",
+  },
+  size: {
+    true: "height",
+    false: "width",
+  },
+  neighbor: {
+    true: {
+      1: "bottom",
+      "-1": "top",
+    },
+    false: {
+      1: "bottom",
+      "-1": "top",
+    },
+  },
+};
 const SimpleWidget = {
   components: { RootView },
   props: {
@@ -259,8 +284,10 @@ const SimpleWidget = {
 
       visibleStart: 0,
       visibleRange: 0,
-      visibleItemList: [],
-      needHideItemList: [],
+
+      visibleItemIndexList: [],
+      needHideItemIndexList: [],
+
       visibleRangeSearchBaseItem: 0,
 
       touchContainerW: 0,
@@ -280,7 +307,7 @@ const SimpleWidget = {
       let visibleStart = 0;
       const targetItem = this.templateParser.GetItem(focusId);
       const pos_key = this.direction === VERTICAL ? "yPos" : "xPos";
-      const width_key = this.direction === VERTICAL ? "height" : "width";
+      const size_key = this.direction === VERTICAL ? "height" : "width";
       if (this.slideStyle === SlideStyle.wholePage) {
         const visibleRange =
           this.direction === VERTICAL
@@ -303,17 +330,17 @@ const SimpleWidget = {
         let last_item = template_list[template_list.length - 1];
         let last_item_off_set =
           last_item[pos_key] +
-          last_item[width_key] -
+          last_item[size_key] -
           visibleRange +
           padding[padding_key];
         for (let i = 0; i <= focusId; i++) {
           const curItem = this.templateParser.GetItem(i);
           if (
-            curItem[pos_key] + curItem[width_key] >
+            curItem[pos_key] + curItem[size_key] >
             visibleStart + (visibleRange * 4) / 5
           ) {
             visibleStart =
-              curItem[pos_key] + curItem[width_key] - (visibleRange * 4) / 5;
+              curItem[pos_key] + curItem[size_key] - (visibleRange * 4) / 5;
           }
         }
         visibleStart =
@@ -338,8 +365,8 @@ const SimpleWidget = {
       return this.focusId;
     },
 
-    _registerItemFunc(id, handlerObj) {
-      this.innerData.data[id].itemHandler = handlerObj;
+    _registerItemFunc(index, handlerObj) {
+      this.innerData.data[index].itemHandler = handlerObj;
     },
 
     _queryPosition(id) {
@@ -396,16 +423,22 @@ const SimpleWidget = {
       }
     },
 
-    _getVisibleItemList(id, start, end) {
+    _getVisibleItemIndexList(id, start, end) {
+      // 扩展可视范围，避免快速滚动时闪烁
       let s = start - 100 > 0 ? start - 100 : 0;
       let e = end + 100;
       let visible_info = this.templateParser.GetVisibleItemList(s, e, id);
-      return this.templateParser
-        .GetTemplate()
-        .List.slice(visible_info.visibleStart, visible_info.visibleEnd + 1);
+      let start_index = visible_info.visibleStart;
+      let end_index = visible_info.visibleEnd;
+
+      let index_list = new Array(end_index - start_index + 1);
+      for (let i = start_index; i <= end_index; i++) {
+        index_list[i - start_index] = i;
+      }
+      return index_list;
     },
 
-    _calculateNearestItemByRect(template_item_list, enter_rect_info) {
+    _calculateNearestItemByRect(visible_item_index_list, enter_rect_info) {
       let edge_direction = enter_rect_info.direction;
       let rect = enter_rect_info.rect;
       var direction = "";
@@ -446,7 +479,9 @@ const SimpleWidget = {
 
       let key_pos = this.direction === VERTICAL ? "yPos" : "xPos";
       let key_width = this.direction === VERTICAL ? "height" : "width";
-      for (let item of template_item_list) {
+      for (let index of visible_item_index_list) {
+        let item = this.templateParser.GetItem(index);
+        if (!item.focusable) continue;
         let full_show =
           item[key_pos] >= this.visibleStart &&
           item[key_pos] + item[key_width] - 1 <=
@@ -589,12 +624,9 @@ const SimpleWidget = {
       }
     },
 
-    _updateItemVisibility(item_list, visibility) {
-      let template = this.templateParser.GetTemplate();
-      for (let i = 0; i < item_list.length; ++i) {
-        this.innerData.data[
-          template.IdsMap[item_list[i].id]
-        ].controller.visible = visibility;
+    _updateItemVisibility(item_index_list, visibility) {
+      for (let index of item_index_list) {
+        this.innerData.data[index].controller.visible = visibility;
       }
     },
 
@@ -633,102 +665,77 @@ const SimpleWidget = {
     },
 
     _updateVisibleList(baseItemId, cur_visible_start, cur_visible_end) {
-      let pre_visible_list = this.visibleItemList;
-      this.visibleItemList = this._getVisibleItemList(
+      let pre_visible_list = this.visibleItemIndexList;
+      this.visibleItemIndexList = this._getVisibleItemIndexList(
         baseItemId,
         cur_visible_start,
         cur_visible_end
       );
-      for (let item of pre_visible_list) {
+      for (let index of pre_visible_list) {
         if (
-          this.visibleItemList.indexOf(item) < 0 &&
-          this.needHideItemList.indexOf(item) < 0
+          this.visibleItemIndexList.indexOf(index) < 0 &&
+          this.needHideItemIndexList.indexOf(index) < 0
         ) {
-          this.needHideItemList.push(item);
+          this.needHideItemIndexList.push(index);
         }
       }
-      for (let item of this.visibleItemList) {
-        let index = this.needHideItemList.indexOf(item);
-        if (index >= 0) {
-          this.needHideItemList.splice(index, 1);
+      for (let index of this.visibleItemIndexList) {
+        let i = this.needHideItemIndexList.indexOf(index);
+        if (i >= 0) {
+          this.needHideItemIndexList.splice(i, 1);
         }
       }
 
       this.visibleStart = cur_visible_start;
       //可见的item设置visibility
-      this._updateItemVisibility(this.visibleItemList, true);
+      this._updateItemVisibility(this.visibleItemIndexList, true);
     },
 
     _moveToNext(horizontal_direction, vertical_direction, item_edge_rect) {
-      let template = this.templateParser.GetTemplate();
-      let focus_index = template.IdsMap[this.focusId];
-      let next_item = this.templateParser.GetNextItem(
+      let cur_focus_item = this.templateParser.GetItemById(this.focusId);
+      let next_item_id = this.templateParser.GetNextItem(
         this.focusId,
         vertical_direction,
         horizontal_direction,
         this.loopFocus
       );
-      if (next_item >= 0) {
+      if (next_item_id >= 0) {
         this.preFocusId = this.focusId;
-        let focus_item = this.templateParser.GetItem(next_item);
-        this.focusId = focus_item.id;
+        let next_focus_item = this.templateParser.GetItemById(next_item_id);
+        this.focusId = next_focus_item.id;
         let direction =
           this.direction === VERTICAL
             ? vertical_direction
             : horizontal_direction;
         let pre_visible_start = this.visibleStart;
         let cur_visible_start = this.slideFunction
-          ? this.slideFunction(focus_item, direction, this.visibleStart)
-          : this._CalculateSlide(focus_item, direction, this.visibleStart);
-        cur_visible_start = this._adjustToValidPosition(cur_visible_start);
+          ? this.slideFunction(next_focus_item, direction, this.visibleStart)
+          : this._calculateSlide(next_focus_item, direction, this.visibleStart);
+        // cur_visible_start = this._adjustToValidPosition(cur_visible_start);
         if (pre_visible_start !== cur_visible_start) {
-          let pre_visible_list = this.visibleItemList;
-          this.visibleItemList = this._getVisibleItemList(
-            next_item,
-            cur_visible_start,
-            cur_visible_start + this.visibleRange - 1
-          );
-
-          for (let item of pre_visible_list) {
-            if (
-              this.visibleItemList.indexOf(item) < 0 &&
-              this.needHideItemList.indexOf(item) < 0
-            ) {
-              this.needHideItemList.push(item);
-            }
-          }
-          for (let item of this.visibleItemList) {
-            let index = this.needHideItemList.indexOf(item);
-            if (index >= 0) {
-              this.needHideItemList.splice(index, 1);
-            }
-          }
-
           this.visibleStart = cur_visible_start;
           let animObj = {
             easing: "",
             onstart: null,
             speed: this.slideSpeed,
-            onend: this._onTransitionEnd,
+            onend: this._onSlideEnd,
           };
           if (this.direction === HORIZONTAL) {
             this.rootElement.updatePosition(-this.visibleStart, 0, animObj);
           } else {
             this.rootElement.updatePosition(0, -this.visibleStart, animObj);
           }
-          this.visibleRangeSearchBaseItem = next_item;
+          this.visibleRangeSearchBaseItem = next_item_id;
           this._updateVisibleList(
-            next_item,
+            next_item_id,
             cur_visible_start,
             cur_visible_start + this.visibleRange - 1
           );
         }
 
         let rect;
-        let x_off_set =
-          template.List[focus_index].xPos - template.List[next_item].xPos;
-        let y_off_set =
-          template.List[focus_index].yPos - template.List[next_item].yPos;
+        let x_off_set = cur_focus_item.xPos - next_focus_item.xPos;
+        let y_off_set = cur_focus_item.yPos - next_focus_item.yPos;
         if (item_edge_rect) {
           item_edge_rect.rect.x += x_off_set;
           item_edge_rect.rect.y += y_off_set;
@@ -739,8 +746,8 @@ const SimpleWidget = {
             rect: {
               x: x_off_set,
               y: y_off_set,
-              width: template.List[focus_index].width,
-              height: template.List[focus_index].height,
+              width: cur_focus_item.width,
+              height: cur_focus_item.height,
             },
           };
         }
@@ -748,61 +755,68 @@ const SimpleWidget = {
         this._updateBlurItem();
         this._updateFocusItem();
         if (this.isFocus) {
-          this.innerData.data[this.preFocusId].itemHandler.onBlur();
+          this.innerData.data[
+            this.templateParser.FocusIdToIndex(this.preFocusId)
+          ].itemHandler.onBlur();
         }
 
         if (this.isFocus) {
-          this.innerData.data[this.focusId].itemHandler.onFocus(
-            this.preEdgeRect
-          );
+          this.innerData.data[
+            this.templateParser.FocusIdToIndex(this.focusId)
+          ].itemHandler.onFocus(this.preEdgeRect);
         }
       } else {
         let x_off_set = this.direction === VERTICAL ? 0 : this.visibleStart;
-          let y_off_set = this.direction === VERTICAL ? this.visibleStart : 0;
-          let edge;
-          if (horizontal_direction === 1) {
-            edge = EdgeDirection.right;
-          }
-          if (horizontal_direction === -1) {
-            edge = EdgeDirection.left;
-          }
-          if (vertical_direction === 1) {
-            edge = EdgeDirection.bottom;
-          }
-          if (vertical_direction === -1) {
-            edge = EdgeDirection.top;
-          }
-          let rect = {
-            x: template.List[focus_index].xPos - x_off_set,
-            y: template.List[focus_index].yPos - y_off_set,
-            width: template.List[focus_index].width,
-            height: template.List[focus_index].height,
-          };
+        let y_off_set = this.direction === VERTICAL ? this.visibleStart : 0;
+        let edge;
+        if (horizontal_direction === 1) {
+          edge = EdgeDirection.right;
+        }
+        if (horizontal_direction === -1) {
+          edge = EdgeDirection.left;
+        }
+        if (vertical_direction === 1) {
+          edge = EdgeDirection.bottom;
+        }
+        if (vertical_direction === -1) {
+          edge = EdgeDirection.top;
+        }
+        let rect = {
+          x: cur_focus_item.xPos - x_off_set,
+          y: cur_focus_item.yPos - y_off_set,
+          width: cur_focus_item.width,
+          height: cur_focus_item.height,
+        };
         if (this.onEdge) {
           this.onEdge({ direction: edge, rect: rect });
         }
-        this.innerData.data[this.focusId].itemHandler.reachEdge({ direction: edge })
+        this.innerData.data[
+          this.templateParser.FocusIdToIndex(this.focusId)
+        ].itemHandler.reachEdge({
+          direction: edge,
+        });
       }
     },
 
-    _adjustToValidPosition(visible_start) {
+    _adjustToValidPosition(visible_start, adjust_end) {
       //TODO 优化
-      let template_list = this.templateParser.GetTemplate().List;
-      let last_item = template_list[template_list.length - 1];
-      let pos_key = this.direction === VERTICAL ? "yPos" : "xPos";
-      let width_key = this.direction === VERTICAL ? "height" : "width";
+      let last_item = this.templateParser.GetItem(-1);
+      let pos_key = directionFreeKeyMap.pos[this.direction === VERTICAL];
+      let size_key = directionFreeKeyMap.size[this.direction === VERTICAL];
       let padding = _getPadding(this.padding);
-      let padding_offset = this.direction === VERTICAL ? padding["bottom"] + padding["top"] : padding["right"] + padding["left"];
+
+      let padding_offset =
+        this.direction === VERTICAL
+          ? padding["bottom"] + padding["top"]
+          : padding["right"] + padding["left"];
       let visible_range =
-        this.direction === VERTICAL ? this.height : this.width;
+        (this.direction === VERTICAL ? this.height : this.width) -
+        padding_offset;
 
-      let last_position = last_item[pos_key] + last_item[width_key];
-      let last_item_off_set =
-        last_position -
-        visible_range 
-        + padding_offset;
+      let last_position = last_item[pos_key] + last_item[size_key];
+      let last_item_off_set = last_position - visible_range;
       last_item_off_set = last_item_off_set < 0 ? 0 : last_item_off_set;
-      if (visible_start > last_item_off_set) {
+      if (adjust_end && visible_start > last_item_off_set) {
         return last_item_off_set;
       } else if (visible_start < 0) {
         return 0;
@@ -811,62 +825,72 @@ const SimpleWidget = {
       }
     },
 
-    _CalculateSlide(target_item, direction, visible_start) {
+    _calculateSlide(target_item, direction, visible_start) {
       let pre_visible_start = visible_start;
       let cur_visible_start = pre_visible_start;
-      // let template_list = this.templateParser.GetTemplate().List;
-      // let last_item = template_list[template_list.length - 1];
-      let pos_key = this.direction === VERTICAL ? "yPos" : "xPos";
-      let width_key = this.direction === VERTICAL ? "height" : "width";
-      // let padding_key = this.direction === VERTICAL ? "bottom" : "right";
+      let pos_key = directionFreeKeyMap.pos[this.direction === VERTICAL];
+      let size_key = directionFreeKeyMap.size[this.direction === VERTICAL];
+      let neighbor_keys =
+        directionFreeKeyMap.neighbor[this.direction === VERTICAL];
       let visible_range =
         this.direction === VERTICAL ? this.height : this.width;
-      // let last_item_off_set;
+
       switch (this.slideStyle) {
         case SlideStyle.seamLess:
-          // last_item_off_set =
-          //   last_item[pos_key] +
-          //   last_item[width_key] -
-          //   visible_range +
-          //   _getPadding(this.padding)[padding_key];
           if (direction > 0) {
             if (
-              target_item[pos_key] + target_item[width_key] >
+              target_item[pos_key] + target_item[size_key] >
               pre_visible_start + (visible_range * 4) / 5
             ) {
               cur_visible_start =
                 target_item[pos_key] +
-                target_item[width_key] -
+                target_item[size_key] -
                 (visible_range * 4) / 5;
+
+              let target_neighbors =
+                target_item.neighborIndexList[neighbor_keys[direction]];
+              if (
+                target_neighbors &&
+                !this.templateParser.GetItem(-1).focusable &&
+                target_neighbors.indexOf(this.templateParser.GetLength() - 1) >=
+                  0
+              ) {
+                cur_visible_start += this.templateParser.GetItem(-1)[size_key];
+              }
             }
           } else if (direction < 0) {
             if (target_item[pos_key] < pre_visible_start + visible_range / 5) {
               cur_visible_start = target_item[pos_key] - visible_range / 5;
+              let target_neighbors =
+                target_item.neighborIndexList[neighbor_keys[direction]];
+              if (
+                target_neighbors &&
+                !this.templateParser.GetItem(0).focusable &&
+                target_neighbors.indexOf(0) >= 0
+              ) {
+                cur_visible_start -= this.templateParser.GetItem(0)[size_key];
+              }
             }
           } else {
             //不是沿widget方向的移动
             if (target_item[pos_key] < pre_visible_start) {
               cur_visible_start = target_item[pos_key] - visible_range / 5;
             } else if (
-              target_item[pos_key] + target_item[width_key] >
+              target_item[pos_key] + target_item[size_key] >
               pre_visible_start + visible_range
             ) {
               cur_visible_start =
                 target_item[pos_key] +
-                target_item[width_key] -
+                target_item[size_key] -
                 (visible_range * 4) / 5;
             }
           }
-          // cur_visible_start =
-          //   cur_visible_start > last_item_off_set
-          //     ? last_item_off_set
-          //     : cur_visible_start;
-          // cur_visible_start = cur_visible_start < 0 ? 0 : cur_visible_start;
+          cur_visible_start = this._adjustToValidPosition(cur_visible_start, true);
           break;
         case SlideStyle.wholePage:
           if (direction > 0) {
             if (
-              target_item[pos_key] + target_item[width_key] >
+              target_item[pos_key] + target_item[size_key] >
               pre_visible_start + visible_range + 1
             ) {
               cur_visible_start = target_item[pos_key];
@@ -874,10 +898,10 @@ const SimpleWidget = {
           } else if (direction < 0) {
             if (target_item[pos_key] < pre_visible_start) {
               cur_visible_start =
-                target_item[pos_key] + target_item[width_key] - visible_range;
-              // cur_visible_start = cur_visible_start < 0 ? 0 : cur_visible_start;
+                target_item[pos_key] + target_item[size_key] - visible_range;
             }
           }
+          cur_visible_start = this._adjustToValidPosition(cur_visible_start, false);
           break;
         case SlideStyle.seamlessFixedId:
           break;
@@ -926,7 +950,7 @@ const SimpleWidget = {
           : this.focusId;
       focus_id = this._ifValidEnterRect(this.enterFocusRect)
         ? this._calculateNearestItemByRect(
-            this.visibleItemList,
+            this.visibleItemIndexList,
             this.enterFocusRect
           )
         : focus_id;
@@ -938,7 +962,9 @@ const SimpleWidget = {
 
       if (this.isFocus) {
         Promise.resolve().then(() => {
-          this.innerData.data[focus_id].itemHandler.onFocus(this.preEdgeRect);
+          this.innerData.data[
+            this.templateParser.FocusIdToIndex(this.focusId)
+          ].itemHandler.onFocus(this.preEdgeRect);
         });
       }
 
@@ -955,41 +981,41 @@ const SimpleWidget = {
       this.preFocusId = this.focusId;
       this.preEdgeRect = null;
       this._updateBlurItem();
-      this.innerData.data[this.preFocusId].itemHandler.onBlur();
+      this.innerData.data[
+        this.templateParser.FocusIdToIndex(this.preFocusId)
+      ].itemHandler.onBlur();
 
       if (this.onBlur) {
         this.onBlur();
       }
     },
 
-    _onTransitionEnd(event) {
+    _applyHideItemIndexList() {
+      this._updateItemVisibility(this.needHideItemIndexList, false);
+      this.needHideItemIndexList = [];
+    },
+
+    _onSlideEnd(event) {
       if (event && event.stopPropagation) {
         event.stopPropagation();
       }
-      this._updateItemVisibility(this.needHideItemList, false);
-      this.needHideItemList = [];
+      this._applyHideItemIndexList();
     },
 
     _onContentUpdate() {
-      this._updateItemVisibility(this.visibleItemList, true);
+      this._updateItemVisibility(this.visibleItemIndexList, true);
       this._updateFocusItem();
     },
 
     _updateFocusItem() {
-      let focus_item = this.templateParser.GetItem(this.focusId);
-      if (focus_item) {
-        this._setZIndex(
-          this.templateParser.GetTemplate().IdsMap[this.focusId],
-          this.data.length
-        );
-      }
+      this._setZIndex(
+        this.templateParser.FocusIdToIndex(this.focusId),
+        this.data.length
+      );
     },
 
     _updateBlurItem() {
-      this._setZIndex(
-        this.templateParser.GetTemplate().IdsMap[this.preFocusId],
-        0
-      );
+      this._setZIndex(this.templateParser.FocusIdToIndex(this.preFocusId), 0);
     },
 
     _onFocusUpdate() {},
@@ -1073,14 +1099,13 @@ const SimpleWidget = {
         anchor_info.doAnim;
 
       if (!do_anim) {
-        this._updateItemVisibility(this.needHideItemList, false);
-        this.needHideItemList = [];
+        this._applyHideItemIndexList();
       } else if (this.rootElement) {
         let animObj = {
           easing: "",
           onstart: null,
           speed: this.slideSpeed,
-          onend: this._onTransitionEnd,
+          onend: this._onSlideEnd,
         };
         if (this.direction === HORIZONTAL) {
           this.rootElement.updatePosition(-this.visibleStart, 0, animObj);
@@ -1115,7 +1140,7 @@ const SimpleWidget = {
         };
       }
       this.focusId = this._calculateNearestItemByRect(
-        this.visibleItemList,
+        this.visibleItemIndexList,
         enterFocusRect
       );
     },
@@ -1169,18 +1194,14 @@ const SimpleWidget = {
           // console.log("SimpleWidget Container OnDragEnd:", msg);
           this._tryReoprtVisibleEvent(msg);
           this._updateFocusByDragInfo(msg["viewX"], msg["viewY"]);
-          if (this.needHideItemList.length > 0) {
-            this._onTransitionEnd();
-          }
+          this._onSlideEnd();
           return true;
         },
         OnFling: (msg) => {
           // console.log("SimpleWidget Container OnFling:", msg);
           this._tryReoprtVisibleEvent(msg);
           this._updateFocusByDragInfo(msg["viewX"], msg["viewY"]);
-          if (this.needHideItemList.length > 0) {
-            this._onTransitionEnd();
-          }
+          this._onSlideEnd();
           return true;
         },
         OnRelease: () => {
@@ -1197,6 +1218,12 @@ const SimpleWidget = {
         onKeyDown: this.onKeyDown,
       };
     },
+    // randomColor() {
+    //   let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+    //   return (
+    //     "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+    //   );
+    // },
   },
   created() {
     if (this.dispatcher) {
@@ -1233,9 +1260,10 @@ const SimpleWidget = {
       this.direction === VERTICAL
         ? Forge.DragSetting.DIRECTION_VERTICAL
         : Forge.DragSetting.DIRECTION_HORIZONTAL;
-    this.innerData.data = template_list.map((item) => {
+    this.innerData.data = template_list.map((item, index) => {
       return {
         data: item,
+        index: index,
         controller: {
           visible: ref(false),
           zIndex: ref(0),
@@ -1248,34 +1276,28 @@ const SimpleWidget = {
       };
     });
 
+    let visible_base_index = 0;
     let init_focus_id = 0;
     let cur_visible_start = 0;
     let visible_range = this.direction === VERTICAL ? this.height : this.width;
-    this.visibleItemList = this._getVisibleItemList(
-      init_focus_id,
-      cur_visible_start,
-      cur_visible_start + visible_range - 1
-    );
-    if (typeof this.baseAnchor !== "undefined") {
-      let pos = this._BaseAnchorInfo2Pos(this.baseAnchor, 0, visible_range);
-      cur_visible_start = this.direction === VERTICAL ? pos.yPos : pos.xPos;
-      this.visibleItemList = this._getVisibleItemList(
-        this.baseAnchor.id,
-        cur_visible_start,
-        cur_visible_start + visible_range - 1
-      );
-    }
     if (this.initFocusId) {
       init_focus_id = this.initFocusId;
+      visible_base_index = this.templateParser.FocusIdToIndex(init_focus_id);
       if (typeof this.baseAnchor === "undefined") {
         cur_visible_start = this._initVisibleStart(init_focus_id);
-        this.visibleItemList = this._getVisibleItemList(
-          init_focus_id,
-          cur_visible_start,
-          cur_visible_start + visible_range - 1
-        );
       }
     }
+    if (typeof this.baseAnchor !== "undefined") {
+      let pos = this._BaseAnchorInfo2Pos(this.baseAnchor, 0, visible_range);
+      cur_visible_start = this.direction === VERTICAL ? pos.yPos : pos.xPos;
+      visible_base_index = this.baseAnchor.index;
+    }
+
+    this.visibleItemIndexList = this._getVisibleItemIndexList(
+      visible_base_index,
+      cur_visible_start,
+      cur_visible_start + visible_range - 1
+    );
     this.focusId = init_focus_id;
     this.visibleStart = cur_visible_start;
     this.visibleRange = visible_range;
@@ -1314,7 +1336,7 @@ const SimpleWidget = {
         if (
           this.baseAnchor &&
           !(
-            this.baseAnchor.id === this.perAnchor.id &&
+            this.baseAnchor.index === this.perAnchor.id &&
             this.baseAnchor.type === this.perAnchor.type
           )
         ) {
@@ -1360,6 +1382,7 @@ const SimpleWidget = {
       this.innerData.data = template_list.map((item, index) => {
         return {
           data: item,
+          index: index,
           controller: {
             visible: ref(false),
             zIndex: ref(0),
@@ -1381,7 +1404,7 @@ const SimpleWidget = {
       }
     }
     //重新获取可视itemlist
-    this.visibleItemList = this._getVisibleItemList(
+    this.visibleItemIndexList = this._getVisibleItemIndexList(
       this.visibleRangeSearchBaseItem,
       this.visibleStart,
       this.visibleStart + this.visibleRange - 1
@@ -1389,7 +1412,9 @@ const SimpleWidget = {
     if (this.isFocus) {
       this._updateFocusItem();
       Promise.resolve().then(() => {
-        this.innerData.data[this.focusId].itemHandler.onFocus(null);
+        this.innerData.data[
+          this.templateParser.FocusIdToIndex(this.focusId)
+        ].itemHandler.onFocus(null);
       });
     }
   },