@shijiu/jsview-vue 0.9.490 → 0.9.590

package/utils/JsViewEngineWidget/MetroWidget/MetroWidget.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2021-09-22 16:08:58
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-05-17 13:01:47
+ * @LastEditTime: 2022-07-13 10:29:51
  * @Description: file content
 -->
 
@@ -70,12 +70,18 @@
                                             "direction": {EdgeDirection}边缘方向, 
                                             "rect": 到达边缘时的区域{x: 0, y: 0, width: 0,height: 0}
                                           }
+        onScroll {function} 滚动时的回调 (visibleStart, visibleRange, totalSize) => {}
+                                visibleStart: 可视区域的起点
+                                visibleRange: 可视区域大小(不含padding)
+                                totalSize: 所有item的总长
  *
  *      enableTouch {boolean} 支持触控
  *      loadAll {boolean} 加载不显示的view，触控场景使用
  *      flingPageWidth {}
  *      flingPageEdge {}
  *    methods:
+        getFocusBlockRef 获取此MetroWidget的 jsv-focus-block句柄，可以使用requestFocus完成获焦
+
         slideTo
           @description 滚动到指定位置
           @params {int} position 滚动目标位置
@@ -124,8 +130,8 @@
                   slideTo: {Function} (targetPosition : int, doAnim : Boolean) => void 
                            滚动到指定位置，注意这个位置是 item 的布局坐标，另外当某些item需要接管滚动时，itemConfig中takeOverSlide要为true。
                 }
- *    onEdge: 若单元格内另有可接管按键的控件（如SimpleWidget），该控件到达边缘需要通知SimpleWidget时的回调
- *    onAction: 单元格内控件需要通过onAction.register方法向SimpleWidget注册 item 的回调，回调函数有
+ *    onItemEdge: 若单元格内另有可接管按键的控件（如MetroWidget），该控件到达边缘需要通知MetroWidget时的回调
+ *    onAction: 单元格内控件需要通过onAction.register方法向MetroWidget注册 item 的回调，回调函数有
                 onFocus， onBlur， onClick, onWidgetEdge
  * 
  * Q: 如何进行布局，定制每个格的尺寸？
@@ -148,16 +154,25 @@
  * 
  * Q: item内是可获焦的元素时该如何处理?
  * A: 焦点处理: item内的元素需要在注册的onFocus和onBlue回调中管理焦点. 即在onFocus时把焦点设置到内部的可获焦节点;
-      onBlur时将焦点给回父SimpleWidget, 注意此时是焦点树上的子节点往父节点切换, 此时为了把子节点blur掉, 
+      onBlur时将焦点给回父MetroWidget, 注意此时是焦点树上的子节点往父节点切换, 此时为了把子节点blur掉, 
       requestFocus函数需要传递一个false参数
 -->
-<script>
-/* eslint-disable no-unused-vars */
 
-import { ref, reactive } from "vue";
-import RootView from "./RootView.vue";
+<script setup>
+/* eslint-disable */
+import {
+  ref,
+  reactive,
+  shallowRef,
+  onMounted,
+  onBeforeUnmount,
+  onUpdated,
+  toRaw,
+  nextTick,
+} from "vue";
 import Forge from "../ForgeDefine";
-import { TemplateParser } from "../TemplateParser";
+import { TemplateParser, TemplateItemAdder } from "../TemplateParser";
+import { PageUpdater } from "./PageUpdater";
 import { SingleRangeModel } from "../RangeModel";
 import Dispatcher from "./Dispatcher";
 import {
@@ -168,254 +183,18 @@ import {
   SlideSetting,
   SeamlessSlide,
 } from "../WidgetCommon";
-
-let emptyFunc = () => {};
-// randomColor() {
-//   let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
-//   return (
-//     "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
-//   );
-// },
-
-class TemplateItemAdder {
-  constructor(template_parser, data, measure_func, page_range, side_effect) {
-    this._TemplateParser = template_parser;
-    this._Data = data;
-    this._PageRange = page_range;
-    this._MeasureFunc = measure_func;
-    this._CurIndex = 0;
-    this._CurPage = 0;
-    this._KeyIndex = 0; //分页处的item
-    this._SideEffect = side_effect;
-    this._Key =
-      this._TemplateParser._Template.Orient.type === HORIZONTAL
-        ? "xPos"
-        : "yPos";
-  }
-
-  tryAddItem(cur_item = null, page_num = 1) {
-    let added = false;
-    if (
-      this._CurIndex < this._Data.length &&
-      (!cur_item ||
-        cur_item[this._Key] >= (this._CurPage - 1) * this._PageRange)
-    ) {
-      while (this._CurIndex < this._Data.length) {
-        let item = this._TemplateParser.ParseTemplateItem(
-          this._MeasureFunc(this._Data[this._CurIndex]),
-          this._Data[this._CurIndex]
-        );
-        this._SideEffect?.(item);
-        this._CurIndex++;
-        if (item[this._Key] >= (this._CurPage + page_num) * this._PageRange) {
-          this._CurPage += page_num;
-          break;
-        }
-      }
-      this._TemplateParser.CalculateNeighborWhenAddStop();
-      added = true;
-    }
-    // 添加完成需要计算neighbor
-    return added;
-  }
-
-  tryAddItemByPosition(position) {
-    const page_num = Math.ceil(position / this._PageRange + 1);
-    if (page_num > this._CurPage) {
-      this.tryAddItem(null, page_num - this._CurPage);
-    }
-  }
-
-  tryAddItemByIndex(index) {
-    let added = false;
-    while (this._CurIndex <= index) {
-      added = true;
-      let item = this._TemplateParser.ParseTemplateItem(
-        this._MeasureFunc(this._Data[this._CurIndex]),
-        this._Data[this._CurIndex]
-      );
-      this._SideEffect?.(item);
-      this._CurIndex++;
-      if (item[this._Key] >= (this._CurPage + 1) * this._PageRange) {
-        this._CurPage++;
-      }
-    }
-    if (added) {
-      this._TemplateParser.CalculateNeighborWhenAddStop();
-    }
-    //再添加一屏
-    this.tryAddItem(this._TemplateParser.GetItem(index), 2);
-  }
-
-  tryAddItemById(id) {
-    const last_item = this._TemplateParser.GetItem(-1);
-    if (!last_item || last_item.id < id) {
-      let added = false;
-      let item = last_item;
-      while (!item || item.id < id) {
-        added = true;
-        item = this._TemplateParser.ParseTemplateItem(
-          this._MeasureFunc(this._Data[this._CurIndex]),
-          this._Data[this._CurIndex]
-        );
-        this._SideEffect?.(item);
-        if (item[this._Key] >= (this._CurPage + 1) * this._PageRange) {
-          this._CurPage++;
-        }
-        this._CurIndex++;
-      }
-      if (added) {
-        this._TemplateParser.CalculateNeighborWhenAddStop();
-      }
-    }
-    //再添加一屏
-    this.tryAddItem(this._TemplateParser.GetItemById(id), 2);
-  }
-
-  updateData(data) {
-    this._Data = data;
-  }
-}
-
-class ItemRange {
-  constructor(start, end) {
-    this.start = start;
-    this.end = end;
-  }
-
-  _merge(from, to) {
-    if (to.ifOverlap(from)) {
-      to.start = Math.min(from.start, to.start);
-      to.end = Math.max(from.end, to.end);
-      return true;
-    }
-    return false;
-  }
-
-  merge(from) {
-    let to = this.clone();
-    this._merge(from, to);
-    return to;
-  }
-
-  selfMerge(from) {
-    return this._merge(from, this);
-  }
-
-  ifOverlap(range) {
-    return this.start <= range.end && range.start <= this.end;
-  }
-
-  clone() {
-    return new ItemRange(this.start, this.end);
-  }
-}
-
-function mergeRangeList(list_1, list_2) {
-  const result_list = list_1.concat();
-  for (let list_2_item of list_2) {
-    let item = list_2_item.clone();
-    for (let i = result_list.length - 1; i >= 0; i--) {
-      if (item.selfMerge(result_list[i])) {
-        result_list.splice(i, 1);
-      }
-    }
-    result_list.push(item);
-  }
-  return result_list;
-}
-
-class PageUpdater {
-  constructor(update_func) {
-    this.tmpRangeList = [];
-    this.rangeList = [];
-
-    this._updateFunc = update_func;
-  }
-
-  update(
-    template,
-    visible_start,
-    visible_end,
-    anchor_id,
-    merge_tmp,
-    permanent_list
-  ) {
-    if (!template || template.GetLength() === 0) return;
-    let visible_range = template.GetVisibleItemList(
-      visible_start,
-      visible_end,
-      anchor_id
-    );
-    if (!visible_range) {
-      return;
-    }
-    let pre_tmp = this.tmpRangeList;
-    let pre_list = this.rangeList;
-    let range = new ItemRange(
-      visible_range.visibleStart,
-      visible_range.visibleEnd
-    );
-    this.rangeList = [range];
-    if (permanent_list) {
-      let permanent_show_list = permanent_list.filter((item) => {
-        let result = false;
-        if (item.alreadyShow || item.index <= range.end) {
-          item.alreadyShow = true;
-          result = true;
-        }
-        return result;
-      });
-      let permanent_range_list = permanent_show_list.map((item) => {
-        return new ItemRange(item.index, item.index);
-      });
-      this.rangeList = mergeRangeList([range], permanent_range_list);
-    }
-    if (pre_list.length > 0) {
-      this.tmpRangeList = mergeRangeList(this.rangeList, pre_list);
-      if (merge_tmp) {
-        this.tmpRangeList = mergeRangeList(this.tmpRangeList, pre_tmp);
-      }
-    }
-  }
-
-  debugPrint() {
-    return (
-      "list: " +
-      JSON.stringify(this.rangeList) +
-      ", tmplist: " +
-      JSON.stringify(this.tmpRangeList)
-    );
-  }
-
-  apply() {
-    this.tmpRangeList = [];
-    this._updateFunc(this.rangeList);
-  }
-
-  applyTmp() {
-    if (this.tmpRangeList.length > 0) {
-      this._updateFunc(this.tmpRangeList);
-    }
-  }
-
-  getRange() {
-    return this.rangeList[0];
-  }
-}
+import { bindFunctions } from "./ToolFunctions";
 
 const _getPadding = function (padding) {
-  let result = {
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-  };
-
-  if (typeof padding !== "undefined" && padding !== null) {
-    Object.assign(result, padding);
-  }
-  return result;
+  return Object.assign(
+    {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+    },
+    padding
+  );
 };
 
 const _getTemplateParser = function (
@@ -475,1509 +254,1631 @@ const directionFreeKeyMap = {
   },
 };
 
-const defaultSlideSetting = new SeamlessSlide(0.2, 0.8);
-const MetroWidget = {
-  components: { RootView },
-  props: {
-    padding: {
-      type: Object,
-      default() {
-        return {
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        };
-      },
-    },
-    direction: {
-      type: Symbol,
-      default: HORIZONTAL,
-    },
-    height: {
-      type: Number,
-      required: true,
-    },
-    width: {
-      type: Number,
-      required: true,
-    },
-    slideBoundary: {
-      validator(value) {
-        return !isNaN(value) && value < 0.5;
-      },
-      default: 0.2,
-    },
-    onClick: {
-      type: Function,
-      default: emptyFunc,
-    },
-    loopFocus: {
-      type: Boolean,
-      default: false,
-    },
-    onEdge: {
-      type: Function,
-      default: emptyFunc,
-    },
-    onFocus: {
-      type: Function,
-      default: emptyFunc,
-    },
-    onBlur: {
-      type: Function,
-      default: emptyFunc,
-    },
-    loadAll: {
-      type: Boolean,
-      default: false,
-    },
-    enableTouch: {
-      type: Boolean,
-      default: false,
-    },
-    flingPageWidth: {
-      type: Number,
-      default: -1,
-    },
-    flingPageEdge: {
-      type: Number,
-      default: 1 / 4,
-    },
-    dispatcher: {
-      type: Object,
-    },
-    measures: {
-      type: Function,
-      required: true,
-    },
-    baseAnchor: {
-      type: Object,
-    },
-    initFocusId: {
-      type: Number,
-      default: 0,
-    },
-    data: {
-      type: Array,
-    },
-    left: {
-      type: Number,
-      default: 0,
-    },
-    top: {
-      type: Number,
-      default: 0,
-    },
-    name: {
-      type: String,
-    },
-    supportHistoryPath: {
-      type: Boolean,
-      default: true,
-    },
-    itemConfig: {
-      type: Function,
-    },
-    onFocusChange: {
-      type: Function,
-    },
-    slideSetting: {
-      type: SlideSetting,
-      default: defaultSlideSetting,
-    },
-    layoutType: {
-      type: String,
-      default: "relative",
-    },
-    enableItemRenderBreak: {
-      type: Boolean,
-      default: false,
-    },
-    provideData: {
-      type: Function,
-    },
-    placeHolderSetting: {
-      type: Object,
-    },
-    sendFocusRectEvent: {
-      type: Boolean,
-      default: false,
+const props = defineProps({
+  padding: {
+    type: Object,
+    default() {
+      return {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+      };
     },
   },
-  watch: {
-    data: function (value, oldValue) {
-      console.log("watch data change ", value, oldValue);
+  direction: {
+    type: Symbol,
+    default: HORIZONTAL,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  width: {
+    type: Number,
+    required: true,
+  },
+  loopFocus: {
+    type: Boolean,
+    default: false,
+  },
+  onEdge: {
+    type: Function,
+    default: null,
+  },
+  onFocus: {
+    type: Function,
+    default: null,
+  },
+  onBlur: {
+    type: Function,
+    default: null,
+  },
+  loadAll: {
+    type: Boolean,
+    default: false,
+  },
+  enableTouch: {
+    type: Boolean,
+    default: false,
+  },
+  flingPageWidth: {
+    type: Number,
+    default: -1,
+  },
+  flingPageEdge: {
+    type: Number,
+    default: 1 / 4,
+  },
+  dispatcher: {
+    type: Object,
+  },
+  measures: {
+    type: Function,
+    required: true,
+  },
+  initFocusId: {
+    type: Number,
+    default: 0,
+  },
+  data: {
+    type: Array,
+  },
+  left: {
+    type: Number,
+    default: 0,
+  },
+  top: {
+    type: Number,
+    default: 0,
+  },
+  name: {
+    type: String,
+  },
+  supportHistoryPath: {
+    type: Boolean,
+    default: true,
+  },
+  itemConfig: {
+    type: Function,
+  },
+  onFocusChange: {
+    type: Function,
+  },
+  slideSetting: {
+    type: SlideSetting,
+    default() {
+      return new SeamlessSlide(0.2, 0.8);
     },
   },
-  setup(props) {
-    return {
-      refreshToken: ref(0),
-      dataUpdateToken: 0,
-      templateParser: null,
-      innerData: [],
-      dataList: [],
-      pageUpdater: null,
-
-      enterFocusId: -1,
-      enterFocusRect: null,
-      focusId: 0,
-      preFocusId: -1,
-      preEdgeRect: null,
-      isFocus: false,
-      perAnchor: null,
-      rootElement: null,
-
-      visibleStart: 0,
-      visibleRange: 0,
-      visibleRangeWithPadding: 0,
-
-      touchContainerW: ref(0),
-      touchContainerH: ref(0),
-      touchListener: null,
-      innerPadding: null,
-      slidePile: null,
-      dragDirection: Forge.DragSetting.DIRECTION_HORIZONTAL,
-      vertical: props.direction == VERTICAL,
-      preAnchorItemIndex: -1,
-      templateItemAdder: null,
-      itemRender: ref(false),
-      permanentItemList: [],
-      preUpdateVisibleStart: 0,
-
-      updateTimerHandler: -1,
-      mounted: false,
-    };
+  layoutType: {
+    type: String,
+    default: "relative",
   },
-  methods: {
-    //供外部获取SimpleWidget内部状态
-    _injectHandler() {
+  enableItemRenderBreak: {
+    type: Boolean,
+    default: false,
+  },
+  provideData: {
+    type: Function,
+  },
+  placeHolderSetting: {
+    type: Object,
+    default() {
       return {
-        getPosition: this._getPosition,
-        getTemplatePosition: this._getTemplatePosition,
-        getAbsolutePosition: this._getAbsolutePosition,
-        registerItemFunc: this._registerItemFunc,
-        getCurrentFocusId: this._getCurrentId,
-        isFocus: this._isFocus,
-        customerSlide: this.slideTo,
-        updateMounted: this._updateMounted,
-        registerItemRef: this._registerItemRef,
-        onFocusChange: this._onFocusChange,
-        getPreEdgeRect: this._getPreEdgeRect,
-        sendCustomerEvent: this._bubbleCustomerEvent,
-        handler: this,
+        backgroundColor: "rgba(255,255,255,0.5)",
       };
     },
+  },
+  sendFocusRectEvent: {
+    type: Boolean,
+    default: false,
+  },
+  keepTraceRange: {
+    type: Number,
+    default: 0,
+  },
+  onScroll: {
+    type: Function,
+  },
+});
+
+let dataUpdateToken = ref(0);
+let templateParser = null;
+let innerData = [];
+let dataList = [];
+let pageUpdater = null;
+let enterFocusId = -1;
+let enterFocusRect = null;
+let focusId = 0;
+let preFocusId = -1;
+let preEdgeRect = null;
+let isFocus = false;
+let touchContainerW = ref(0);
+let touchContainerH = ref(0);
+let touchListener = null;
+let innerPadding = null;
+let slidePile = null;
+let dragDirection = Forge.DragSetting.DIRECTION_HORIZONTAL;
+let vertical = props.direction == VERTICAL;
+let preAnchorItemIndex = -1;
+let templateItemAdder = null;
+let itemRender = ref(!props.enableItemRenderBreak);
+let permanentItemList = [];
+let preUpdateVisibleStart = 0;
+let mounted = false;
+let focusNode = ref(null);
+let pageRange = vertical ? props.height : props.width;
+let visibleInfo = {
+  _start: 0,
+  range: 0,
+  padding: {
+    start: 0,
+    end: 0,
+  },
+  _startMax: 0,
 
-    _getPreEdgeRect() {
-      return this.preEdgeRect;
-    },
+  set start(value) {
+    this._start = value;
+    this._startMax = Math.max(this._start, this._startMax);
+  },
 
-    _onFocusChange(id) {
-      this.onFocusChange?.(id);
-    },
+  get start() {
+    return this._start;
+  },
 
-    _isFocus() {
-      return this.isFocus;
-    },
+  get end() {
+    return this._start + this.range - 1;
+  },
 
-    _getCurrentId() {
-      return {
-        id: this.focusId,
-        index: this.templateParser.FocusIdToIndex(this.focusId),
-      };
-    },
+  get startMax() {
+    return this._startMax;
+  },
 
-    _registerItemFunc(index, handlerObj) {
-      this.innerData[index].itemHandler = handlerObj;
-    },
+  get startWithPadding() {
+    return this._start - this.padding.start;
+  },
 
-    _registerItemRef(index, itemRef) {
-      this.innerData[index].itemRef = itemRef;
-    },
+  get endWithPadding() {
+    return this._start + this.range + this.padding.end - 1;
+  },
+};
 
-    _updateMounted(index, mounted) {
-      if (index >= this.innerData.length) {
-        console.warn("sw updateMounted error: over range");
-        return;
-      }
-      this.innerData[index].mounted = mounted;
-    },
+let locateDiv = ref(null);
+let slideDiv = ref(null);
+let renderData = shallowRef([]);
+let slideDivLeft = ref(0);
+let slideDivTop = ref(0);
+let callFocusAfterUpdate = false;
+let renderBreakKey = props.enableItemRenderBreak
+  ? "__QcodeJsviewMetroWidgetSlot"
+  : "";
+let pageUpdateToken = ref(0);
+
+//methods
+const _onFocusChange = (id) => {
+  props.onFocusChange?.(id);
+};
 
-    _getPosition(index) {
-      let item = this.templateParser.GetItem(index);
-      let x_offset = this.direction === VERTICAL ? 0 : -this.visibleStart;
-      let y_offset = this.direction === VERTICAL ? -this.visibleStart : 0;
-      return {
-        left: item.xPos + x_offset,
-        top: item.yPos + y_offset,
-        width: item.width,
-        height: item.height,
-      };
-    },
+const _getCurrentId = () => {
+  return {
+    id: focusId,
+    index: templateParser.FocusIdToIndex(focusId),
+  };
+};
 
-    _getTemplatePosition(index) {
-      let item = this.templateParser.GetItem(index);
-      return {
-        left: item.xPos,
-        top: item.yPos,
-        width: item.width,
-        height: item.height,
-      };
-    },
+const _getPosition = (index) => {
+  let item = templateParser.GetItem(index);
+  let x_offset = props.direction === VERTICAL ? 0 : -visibleInfo.start;
+  let y_offset = props.direction === VERTICAL ? -visibleInfo.start : 0;
+  return {
+    left: item.xPos + x_offset,
+    top: item.yPos + y_offset,
+    width: item.width,
+    height: item.height,
+  };
+};
 
-    _getAbsolutePosition(index, targetEle) {
-      return getPositionRelativeToView(
-        this.innerData[index].itemRef?.getDivElement(),
-        targetEle
-      );
-    },
+const _getTemplatePosition = (index) => {
+  let item = templateParser.GetItem(index);
+  return {
+    left: item.xPos,
+    top: item.yPos,
+    width: item.width,
+    height: item.height,
+  };
+};
 
-    _dispatchEvent(event) {
-      switch (event.type) {
-        case Dispatcher.Type.setEnterFocusId:
-          this.setEnterFocusId(event.data);
-          break;
-        case Dispatcher.Type.setEnterFocusRect:
-          this.setEnterFocusRect(event.data);
-          break;
-        case Dispatcher.Type.updateItem:
-          break;
-        case Dispatcher.Type.slideToItem:
-          if (event.data) {
-            this.slideToItem(event.data?.id, event.data?.doAnim);
-          }
-          break;
-        case Dispatcher.Type.setFocusId:
-          this.setFocusId(
-            event.data?.id,
-            event.data?.needSlide,
-            event.data?.doAnim
-          );
-          break;
-        default:
-          break;
+const _getAbsolutePosition = (index, targetEle) => {
+  return getPositionRelativeToView(innerData[index].itemDivRef, targetEle);
+};
+
+const _dispatchEvent = (event) => {
+  switch (event.type) {
+    case Dispatcher.Type.setEnterFocusId:
+      setEnterFocusId(event.data);
+      break;
+    case Dispatcher.Type.setEnterFocusRect:
+      setEnterFocusRect(event.data);
+      break;
+    case Dispatcher.Type.updateItem:
+      break;
+    case Dispatcher.Type.slideToItem:
+      if (event.data) {
+        slideToItem(event.data?.id, event.data?.doAnim);
       }
-    },
+      break;
+    case Dispatcher.Type.setFocusId:
+      setFocusId(event.data?.id, event.data?.needSlide, event.data?.doAnim);
+      break;
+    default:
+      break;
+  }
+};
 
-    setFocusId(id, needSlide = true, doAnim = false) {
-      this.templateItemAdder.tryAddItemById(id);
-      let next_focus_item = this.templateParser.GetItemById(id);
-      if (next_focus_item) {
-        if (needSlide) {
-          this.slideToItem(this.templateParser.FocusIdToIndex(id), doAnim);
-        }
+const onItemClick = (index) => {
+  if (isFocus && innerData[index].callbacks.callable("onClick")) {
+    innerData[index].callbacks.onClick();
+  }
+};
 
-        const cur_focus_item = this.templateParser.GetItemById(this.focusId);
-        this.preFocusId = this.focusId;
-        this.focusId = next_focus_item.id;
-
-        let x_off_set = cur_focus_item.xPos - next_focus_item.xPos;
-        let y_off_set = cur_focus_item.yPos - next_focus_item.yPos;
-        this.preEdgeRect = {
-          direction: null,
-          rect: {
-            x: x_off_set,
-            y: y_off_set,
-            width: cur_focus_item.width,
-            height: cur_focus_item.height,
-          },
-        };
-        this._updateBlurItem();
-        this._updateFocusItem();
-        if (this.isFocus) {
-          this.innerData[
-            this.templateParser.FocusIdToIndex(this.preFocusId)
-          ].itemHandler.onBlur?.();
-        }
-        if (
-          this.isFocus &&
-          this.innerData[this.templateParser.FocusIdToIndex(this.focusId)]
-            .mounted
-        ) {
-          this.innerData[
-            this.templateParser.FocusIdToIndex(this.focusId)
-          ].itemHandler.onFocus?.(this.preEdgeRect);
-        }
-      }
-    },
+const onItemBlur = (index) => {
+  if (isFocus && innerData[index].callbacks.callable("onBlur")) {
+    innerData[index].callbacks.onBlur();
+  }
+};
 
-    getFocusBlockRef() {
-      return this.$refs.focusNode;
-    },
+const onItemFocus = (index, rect) => {
+  if (isFocus) {
+    _itemOnFocusSideEffect(innerData[index], rect);
+    if (innerData[index].callbacks.callable("onFocus")) {
+      innerData[index].callbacks.onFocus(rect);
+    } else {
+      callFocusAfterUpdate = true;
+    }
+  }
+};
 
-    setEnterFocusId(id) {
-      this.templateItemAdder.tryAddItemById(id);
-      this.enterFocusId = id;
-    },
+const setFocusId = (id, needSlide = true, doAnim = false) => {
+  templateItemAdder.tryAddItemById(id);
+  let next_focus_item = templateParser.GetItemById(id);
+  if (next_focus_item) {
+    if (needSlide) {
+      slideToItem(templateParser.FocusIdToIndex(id), doAnim);
+    }
 
-    setEnterFocusRect(rect) {
-      this.enterFocusRect = rect;
-    },
+    const cur_focus_item = templateParser.GetItemById(focusId);
+    preFocusId = focusId;
+    focusId = next_focus_item.id;
+
+    let x_off_set = cur_focus_item.xPos - next_focus_item.xPos;
+    let y_off_set = cur_focus_item.yPos - next_focus_item.yPos;
+    preEdgeRect = {
+      direction: null,
+      rect: {
+        x: x_off_set,
+        y: y_off_set,
+        width: cur_focus_item.width,
+        height: cur_focus_item.height,
+      },
+    };
+    _updateBlurItem();
+    _updateFocusItem();
+    onItemBlur(templateParser.FocusIdToIndex(preFocusId));
+    onItemFocus(templateParser.FocusIdToIndex(focusId), preEdgeRect);
+  }
+};
 
-    slideTo(position, doAnim) {
-      this.templateItemAdder.tryAddItemByPosition(position);
-      if (
-        typeof position !== "undefined" &&
-        position != null &&
-        this.visibleStart !== position
-      ) {
-        this.visibleStart = position;
-        let animObj = null;
-        if (doAnim) {
-          animObj = {
-            easing: this.slideSetting.Easing,
-            onstart: null,
-            speed: this.slideSetting.Speed,
-            onend: this._onSlideEnd,
-          };
-        }
-        this._slideTo(this.visibleStart, animObj);
-
-        this.pageUpdater.update(
-          this.templateParser,
-          this.visibleStart,
-          this.visibleStart + this.visibleRangeWithPadding - 1,
-          this.focusId,
-          false,
-          this.permanentItemList
-        );
-        if (doAnim) {
-          this.pageUpdater.applyTmp();
-        } else {
-          this.pageUpdater.apply();
-        }
-      }
-    },
+const getFocusBlockRef = () => {
+  return toRaw(focusNode.value);
+};
 
-    slideToItem(index, doAnim) {
-      this.templateItemAdder.tryAddItemByIndex(index);
-      const targetItem = this.templateParser.GetItem(index);
-      if (targetItem) {
-        const direction = index - this.preAnchorItemIndex > 0 ? 1 : -1;
-        const visible_start = this._calculateVisibleStart(
-          targetItem,
-          direction
-        );
-        this.slideTo(visible_start, doAnim);
-      }
-    },
+const setEnterFocusId = (id) => {
+  templateItemAdder.tryAddItemById(id);
+  enterFocusId = id;
+};
 
-    refreshData(force_update) {
-      //由于data不支持reactive, 因此数据的更新只通过provideData
-      if (!this.provideData) {
-        console.error("refreshData: provideData is null.");
-        return;
-      }
-      let _force_update = force_update;
-      let template_list = this.templateParser.GetTemplate().List;
-      if (!template_list || template_list.length === 0) {
-        _force_update = true;
-      }
-      let new_list = this.provideData();
-      if (this.focusId >= new_list.length) {
-        this.focusId = 0;
-        this.preFocusId = -1;
-        if (this.visibleStart !== 0) {
-          this.visibleStart = 0;
-          this._slideTo(0, null);
-        }
-      }
-      let new_index = 0;
-      if (!_force_update) {
-        for (new_index = 0; new_index < new_list.length; ++new_index) {
-          let already_add = false;
-          for (let j = 0; j < template_list.length; ++j) {
-            if (new_list[new_index] === template_list[j].data) {
-              already_add = true;
-              break;
-            }
-          }
-          if (!already_add) {
-            break;
-          }
-        }
-      }
-      let need_update_content = false;
-      if (!_force_update && new_index === template_list.length) {
-        //原始数据都在
-        if (new_index !== new_list.length) {
-          //增加数据
-          need_update_content = true;
-          this.templateItemAdder.updateData(new_list);
-        } else {
-          //数据没变
+const setEnterFocusRect = (rect) => {
+  enterFocusRect = rect;
+};
+
+const slideTo = (position, doAnim) => {
+  templateItemAdder.tryAddItemByPosition(position);
+  if (
+    typeof position !== "undefined" &&
+    position != null &&
+    visibleInfo.start !== position
+  ) {
+    visibleInfo.start = position;
+    let animObj = null;
+    if (doAnim) {
+      animObj = {
+        easing: props.slideSetting.Easing,
+        onstart: null,
+        speed: props.slideSetting.Speed,
+        onend: _onSlideEnd,
+      };
+    }
+    _slideTo(visibleInfo.start, animObj);
+
+    pageUpdater.update(
+      templateParser,
+      visibleInfo.startWithPadding,
+      visibleInfo.endWithPadding,
+      focusId,
+      false,
+      permanentItemList
+    );
+    if (doAnim) {
+      pageUpdater.applyTmp();
+    } else {
+      pageUpdater.apply();
+    }
+  }
+};
+
+const slideToItem = (index, doAnim) => {
+  templateItemAdder.tryAddItemByIndex(index);
+  const targetItem = templateParser.GetItem(index);
+  if (targetItem) {
+    const direction = index - preAnchorItemIndex > 0 ? 1 : -1;
+    const visible_start = _calculateVisibleStart(targetItem, direction);
+    slideTo(visible_start, doAnim);
+  }
+};
+
+const refreshData = (force_update) => {
+  //由于data不支持reactive, 因此数据的更新只通过provideData
+  if (!props.provideData) {
+    console.error("refreshData: provideData is null.");
+    return;
+  }
+  let _force_update = force_update;
+  let template_list = templateParser.GetTemplate().List;
+  if (!template_list || template_list.length === 0) {
+    _force_update = true;
+  }
+  let new_list = toRaw(props.provideData());
+  let needSlide = false;
+  if (focusId >= new_list.length) {
+    focusId = 0;
+    preFocusId = -1;
+    if (visibleInfo.start !== 0) {
+      visibleInfo.start = 0;
+      needSlide = true;
+    }
+  }
+  let new_index = 0;
+  if (!_force_update) {
+    for (new_index = 0; new_index < new_list.length; ++new_index) {
+      let already_add = false;
+      for (let j = 0; j < template_list.length; ++j) {
+        if (new_list[new_index] === template_list[j].data) {
+          already_add = true;
+          break;
         }
-      } else {
-        //数据更改
-        this.permanentItemList = [];
-        need_update_content = true;
-        this.templateParser = _getTemplateParser(
-          this.width,
-          this.height,
-          this.direction,
-          this.padding,
-          this.supportHistoryPath,
-          this.layoutType
-        );
-        this.innerData = [];
-        this.dataList = new_list;
-        this.templateItemAdder = new TemplateItemAdder(
-          this.templateParser,
-          new_list,
-          this.measures,
-          this.visibleRangeWithPadding,
-          this._onTemplateAdd
-        );
-        this.templateItemAdder.tryAddItemById(this.focusId);
-      }
-      if (need_update_content) {
-        let template_list = this.templateParser.GetTemplate().List;
-        let last_item = template_list[template_list.length - 1];
-        this.touchListener = this._getTouchListener();
-        this.innerPadding = _getPadding(this.padding);
-        this.touchContainerW =
-          this.direction === VERTICAL
-            ? this.width
-            : last_item.xPos + last_item.width;
-        this.touchContainerH =
-          this.direction === VERTICAL
-            ? last_item.yPos + last_item.height
-            : this.height;
-        this.slidePile = new Forge.RectArea(
-          0,
-          0,
-          this.width - this.innerPadding.left - this.innerPadding.right,
-          this.height - this.innerPadding.top - this.innerPadding.bottom
-        );
-        this.dragDirection =
-          this.direction === VERTICAL
-            ? Forge.DragSetting.DIRECTION_VERTICAL
-            : Forge.DragSetting.DIRECTION_HORIZONTAL;
       }
-      this.pageUpdater.update(
-        this.templateParser,
-        this.visibleStart,
-        this.visibleStart + this.visibleRangeWithPadding - 1,
-        this.focusId,
-        false,
-        this.permanentItemList
-      );
-      this.dataUpdateToken++;
-      this.pageUpdater.apply();
-      if (
-        this.isFocus &&
-        this.innerData[this.templateParser.FocusIdToIndex(this.focusId)].mounted
-      ) {
-        this._updateFocusItem();
-        this.innerData[
-          this.templateParser.FocusIdToIndex(this.focusId)
-        ].itemHandler.onFocus?.(null);
+      if (!already_add) {
+        break;
       }
-    },
+    }
+  }
+  let need_update_content = false;
+  if (!_force_update && new_index === template_list.length) {
+    //原始数据都在
+    if (new_index !== new_list.length) {
+      //增加数据
+      need_update_content = true;
+      templateItemAdder.updateData(new_list);
+    } else {
+      //数据没变
+    }
+  } else {
+    pageUpdateToken.value++;
+    //数据更改
+    permanentItemList = [];
+    need_update_content = true;
+    templateParser = _getTemplateParser(
+      props.width,
+      props.height,
+      props.direction,
+      props.padding,
+      props.supportHistoryPath,
+      props.layoutType
+    );
+    innerData = [];
+    dataList = new_list;
+    templateItemAdder = new TemplateItemAdder(
+      templateParser,
+      dataList,
+      props.measures,
+      pageRange,
+      _onTemplateAdd
+    );
+  }
+  if (need_update_content) {
+    if (props.onScroll) {
+      templateItemAdder.tryAddItemByIndex(dataList.length - 1);
+    } else {
+      templateItemAdder.tryAddItemById(focusId);
+    }
+    let template_list = templateParser.GetTemplate().List;
+    let last_item = template_list[template_list.length - 1];
+    touchListener = _getTouchListener();
+    innerPadding = _getPadding(props.padding);
+    touchContainerW.value =
+      props.direction === VERTICAL
+        ? props.width
+        : last_item
+        ? last_item.xPos + last_item.width
+        : 0;
+    touchContainerH.value =
+      props.direction === VERTICAL
+        ? last_item
+          ? last_item.yPos + last_item.height
+          : 0
+        : props.height;
+    slidePile = new Forge.RectArea(
+      0,
+      0,
+      props.width - innerPadding.left - innerPadding.right,
+      props.height - innerPadding.top - innerPadding.bottom
+    );
+    dragDirection =
+      props.direction === VERTICAL
+        ? Forge.DragSetting.DIRECTION_VERTICAL
+        : Forge.DragSetting.DIRECTION_HORIZONTAL;
+  }
+  pageUpdater.update(
+    templateParser,
+    visibleInfo.startWithPadding,
+    visibleInfo.endWithPadding,
+    focusId,
+    false,
+    permanentItemList
+  );
+  dataUpdateToken.value++;
+  pageUpdater.apply();
+  _updateFocusItem();
+  onItemFocus(templateParser.FocusIdToIndex(focusId), null);
+  if (needSlide) {
+    _slideTo(visibleInfo.start, null);
+  } else if (need_update_content) {
+    _onScroll();
+  }
+};
 
-    _calculateNearestItemByRect(visible_range, enter_rect_info) {
-      let edge_direction = enter_rect_info.direction;
-      let rect = enter_rect_info.rect;
-      var direction = "";
-      var point = { x: 0, y: 0 };
-      switch (edge_direction) {
-        case EdgeDirection.left:
-          direction = "left";
-          point.x = rect.x;
-          point.y = rect.y + rect.height / 4;
+const exportObject = {
+  slideTo,
+  setFocusId,
+  getFocusBlockRef,
+  setEnterFocusId,
+  setEnterFocusRect,
+  slideToItem,
+  refreshData,
+  _dispatchEvent,
+  _getAbsolutePosition,
+};
+
+const _calculateNearestItemByRect = (visible_range, enter_rect_info) => {
+  let edge_direction = enter_rect_info.direction;
+  let rect = enter_rect_info.rect;
+  var direction = "";
+  var point = { x: 0, y: 0 };
+  switch (edge_direction) {
+    case EdgeDirection.left:
+      direction = "left";
+      point.x = rect.x;
+      point.y = rect.y + rect.height / 4;
+      break;
+    case EdgeDirection.right:
+      direction = "right";
+      point.x = rect.x + rect.width;
+      point.y = rect.y + rect.height / 4;
+      break;
+    case EdgeDirection.top:
+      direction = "up";
+      point.x = rect.x + rect.width / 4;
+      point.y = rect.y;
+      break;
+    case EdgeDirection.bottom:
+      direction = "down";
+      point.x = rect.x + rect.width / 4;
+      point.y = rect.y + rect.height;
+      break;
+    default:
+      break;
+  }
+
+  var src_x_range = new SingleRangeModel(point.x, point.x);
+  var src_y_range = new SingleRangeModel(point.y, point.y);
+
+  var min_distance_item = null;
+  var min_distance = -1;
+  var min_direction_weighted = 0;
+  var distance = 0;
+  var direction_weighted = 0; // 根据进入方向决定的权值，用于保证
+
+  let key_pos = props.direction === VERTICAL ? "yPos" : "xPos";
+  let key_width = props.direction === VERTICAL ? "height" : "width";
+  for (let index = visible_range.start; index <= visible_range.end; index++) {
+    let item = templateParser.GetItem(index);
+    if (!item.focusable) continue;
+    let full_show =
+      item[key_pos] >= visibleInfo.start &&
+      item[key_pos] + item[key_width] - 1 <= visibleInfo.end;
+    if (full_show) {
+      let x_pos =
+        props.direction === VERTICAL
+          ? item.xPos
+          : item.xPos - visibleInfo.start;
+      let y_pos =
+        props.direction === VERTICAL
+          ? item.yPos - visibleInfo.start
+          : item.yPos;
+      var target_x_range = new SingleRangeModel(x_pos, x_pos + item.width - 1);
+      var target_y_range = new SingleRangeModel(y_pos, y_pos + item.height - 1);
+      switch (direction) {
+        case "left":
+          if (point.x < x_pos + item.width - 1) {
+            // 这个点在item左侧，不可能左移到item
+            continue;
+          }
+          if (point.y < y_pos) {
+            //1.该点在其上，计算point和item右上角的距离
+            distance =
+              Math.pow(point.x - (x_pos + item.width - 1), 2) +
+              Math.pow(y_pos - point.y, 2);
+          } else if (src_y_range.IsInterAct(target_y_range)) {
+            //2.该点在其中，计算point和item右边框的垂直距离
+            distance = Math.pow(point.x - (x_pos + item.width - 1), 2);
+          } else if (point.y > y_pos + item.height - 1) {
+            //3.该点在其下，计算point到item右下角的距离
+            distance =
+              Math.pow(point.x - (x_pos + item.width - 1), 2) +
+              Math.pow(point.y - (y_pos + item.height - 1), 2);
+          }
+          // point与item右边框的距离作为权值
+          direction_weighted = Math.abs(point.x - (x_pos + item.width - 1));
           break;
-        case EdgeDirection.right:
-          direction = "right";
-          point.x = rect.x + rect.width;
-          point.y = rect.y + rect.height / 4;
+        case "right":
+          if (point.x > x_pos) {
+            // 这个点在item右侧，不可能右移到item
+            continue;
+          }
+          if (point.y < y_pos) {
+            //1.该点在其上， 计算point和item左上角的距离
+            distance =
+              Math.pow(x_pos - point.x, 2) + Math.pow(y_pos - point.y, 2);
+          } else if (src_y_range.IsInterAct(target_y_range)) {
+            //2.该点在其中，计算point和item左边框的垂直距离
+            distance = Math.pow(x_pos - point.x, 2);
+            //(x2-x1)^2
+          } else if (point.y > y_pos + item.height - 1) {
+            //3.该点在其下，计算point和item左下角的距离
+            distance =
+              Math.pow(x_pos - point.x, 2) +
+              Math.pow(point.y - (y_pos + item.height - 1), 2);
+          }
+          // point与item左边框的距离作为权值
+          direction_weighted = Math.abs(point.x - x_pos);
           break;
-        case EdgeDirection.top:
-          direction = "up";
-          point.x = rect.x + rect.width / 4;
-          point.y = rect.y;
+        case "up":
+          if (point.y < y_pos + item.height - 1) {
+            // 这个点在item上侧，不可能上移到item
+            continue;
+          }
+          if (point.x < x_pos) {
+            //1.该点在其前，计算point和item右下角的距离
+            distance =
+              Math.pow(point.x - x_pos, 2) +
+              Math.pow(point.y - (y_pos + item.height - 1), 2);
+          } else if (src_x_range.IsInterAct(target_x_range)) {
+            //2.该点在其中，计算point和item下边框的垂直距离
+            distance = Math.pow(point.y - (y_pos + item.height - 1), 2);
+          } else if (point.x > x_pos + item.width - 1) {
+            //3.该点在其后，计算point和item左下角的距离
+            distance =
+              Math.pow(point.x - (x_pos + item.width - 1), 2) +
+              Math.pow(point.y - (y_pos + item.height - 1), 2);
+          }
+          // point与item下边框的距离作为权值
+          direction_weighted = Math.abs(point.y - (y_pos + item.height - 1));
           break;
-        case EdgeDirection.bottom:
-          direction = "down";
-          point.x = rect.x + rect.width / 4;
-          point.y = rect.y + rect.height;
+        case "down":
+          if (point.y > y_pos) {
+            // 这个点在item下侧，不可能下移到item
+            continue;
+          }
+          if (point.x < x_pos) {
+            //1.该点在其前，计算point和item右上角的距离
+            distance =
+              Math.pow(point.x - x_pos, 2) + Math.pow(y_pos - point.y, 2);
+          } else if (src_x_range.IsInterAct(target_x_range)) {
+            //2.该点在其中，计算point和item上边框的垂直距离
+            distance = Math.pow(y_pos - point.y, 2);
+          } else if (point.x > x_pos + item.width - 1) {
+            //3.该点在其后，计算point和item左上角的距离
+            distance =
+              Math.pow(point.x - (x_pos + item.width - 1), 2) +
+              Math.pow(y_pos - point.y, 2);
+          }
+          // point与item上边框的距离作为权值
+          direction_weighted = Math.abs(point.y - y_pos);
           break;
         default:
+          console.log("direction is error:" + direction);
           break;
       }
-
-      var src_x_range = new SingleRangeModel(point.x, point.x);
-      var src_y_range = new SingleRangeModel(point.y, point.y);
-
-      var min_distance_item = null;
-      var min_distance = -1;
-      var min_direction_weighted = 0;
-      var distance = 0;
-      var direction_weighted = 0; // 根据进入方向决定的权值，用于保证
-
-      let key_pos = this.direction === VERTICAL ? "yPos" : "xPos";
-      let key_width = this.direction === VERTICAL ? "height" : "width";
-      for (
-        let index = visible_range.start;
-        index <= visible_range.end;
-        index++
-      ) {
-        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 <=
-            this.visibleStart + this.visibleRange - 1;
-        if (full_show) {
-          let x_pos =
-            this.direction === VERTICAL
-              ? item.xPos
-              : item.xPos - this.visibleStart;
-          let y_pos =
-            this.direction === VERTICAL
-              ? item.yPos - this.visibleStart
-              : item.yPos;
-          var target_x_range = new SingleRangeModel(
-            x_pos,
-            x_pos + item.width - 1
-          );
-          var target_y_range = new SingleRangeModel(
-            y_pos,
-            y_pos + item.height - 1
-          );
-          switch (direction) {
-            case "left":
-              if (point.x < x_pos + item.width - 1) {
-                // 这个点在item左侧，不可能左移到item
-                continue;
-              }
-              if (point.y < y_pos) {
-                //1.该点在其上，计算point和item右上角的距离
-                distance =
-                  Math.pow(point.x - (x_pos + item.width - 1), 2) +
-                  Math.pow(y_pos - point.y, 2);
-              } else if (src_y_range.IsInterAct(target_y_range)) {
-                //2.该点在其中，计算point和item右边框的垂直距离
-                distance = Math.pow(point.x - (x_pos + item.width - 1), 2);
-              } else if (point.y > y_pos + item.height - 1) {
-                //3.该点在其下，计算point到item右下角的距离
-                distance =
-                  Math.pow(point.x - (x_pos + item.width - 1), 2) +
-                  Math.pow(point.y - (y_pos + item.height - 1), 2);
-              }
-              // point与item右边框的距离作为权值
-              direction_weighted = Math.abs(point.x - (x_pos + item.width - 1));
-              break;
-            case "right":
-              if (point.x > x_pos) {
-                // 这个点在item右侧，不可能右移到item
-                continue;
-              }
-              if (point.y < y_pos) {
-                //1.该点在其上， 计算point和item左上角的距离
-                distance =
-                  Math.pow(x_pos - point.x, 2) + Math.pow(y_pos - point.y, 2);
-              } else if (src_y_range.IsInterAct(target_y_range)) {
-                //2.该点在其中，计算point和item左边框的垂直距离
-                distance = Math.pow(x_pos - point.x, 2);
-                //(x2-x1)^2
-              } else if (point.y > y_pos + item.height - 1) {
-                //3.该点在其下，计算point和item左下角的距离
-                distance =
-                  Math.pow(x_pos - point.x, 2) +
-                  Math.pow(point.y - (y_pos + item.height - 1), 2);
-              }
-              // point与item左边框的距离作为权值
-              direction_weighted = Math.abs(point.x - x_pos);
-              break;
-            case "up":
-              if (point.y < y_pos + item.height - 1) {
-                // 这个点在item上侧，不可能上移到item
-                continue;
-              }
-              if (point.x < x_pos) {
-                //1.该点在其前，计算point和item右下角的距离
-                distance =
-                  Math.pow(point.x - x_pos, 2) +
-                  Math.pow(point.y - (y_pos + item.height - 1), 2);
-              } else if (src_x_range.IsInterAct(target_x_range)) {
-                //2.该点在其中，计算point和item下边框的垂直距离
-                distance = Math.pow(point.y - (y_pos + item.height - 1), 2);
-              } else if (point.x > x_pos + item.width - 1) {
-                //3.该点在其后，计算point和item左下角的距离
-                distance =
-                  Math.pow(point.x - (x_pos + item.width - 1), 2) +
-                  Math.pow(point.y - (y_pos + item.height - 1), 2);
-              }
-              // point与item下边框的距离作为权值
-              direction_weighted = Math.abs(
-                point.y - (y_pos + item.height - 1)
-              );
-              break;
-            case "down":
-              if (point.y > y_pos) {
-                // 这个点在item下侧，不可能下移到item
-                continue;
-              }
-              if (point.x < x_pos) {
-                //1.该点在其前，计算point和item右上角的距离
-                distance =
-                  Math.pow(point.x - x_pos, 2) + Math.pow(y_pos - point.y, 2);
-              } else if (src_x_range.IsInterAct(target_x_range)) {
-                //2.该点在其中，计算point和item上边框的垂直距离
-                distance = Math.pow(y_pos - point.y, 2);
-              } else if (point.x > x_pos + item.width - 1) {
-                //3.该点在其后，计算point和item左上角的距离
-                distance =
-                  Math.pow(point.x - (x_pos + item.width - 1), 2) +
-                  Math.pow(y_pos - point.y, 2);
-              }
-              // point与item上边框的距离作为权值
-              direction_weighted = Math.abs(point.y - y_pos);
-              break;
-            default:
-              console.log("direction is error:" + direction);
-              break;
-          }
-          if (min_distance < 0) {
-            // 设置首个找到的项目
-            min_distance = distance;
-            min_direction_weighted = direction_weighted;
-            min_distance_item = item;
-          } else {
-            if (
-              min_direction_weighted > direction_weighted ||
-              (min_direction_weighted === direction_weighted &&
-                min_distance > distance)
-            ) {
-              // 先进行权值比较，在权值相等时，再比较距离
-              min_distance = distance;
-              min_direction_weighted = direction_weighted;
-              min_distance_item = item;
-            }
-          }
+      if (min_distance < 0) {
+        // 设置首个找到的项目
+        min_distance = distance;
+        min_direction_weighted = direction_weighted;
+        min_distance_item = item;
+      } else {
+        if (
+          min_direction_weighted > direction_weighted ||
+          (min_direction_weighted === direction_weighted &&
+            min_distance > distance)
+        ) {
+          // 先进行权值比较，在权值相等时，再比较距离
+          min_distance = distance;
+          min_direction_weighted = direction_weighted;
+          min_distance_item = item;
         }
       }
+    }
+  }
 
-      if (min_distance_item) {
-        return min_distance_item.id;
-      } else {
-        return 0;
-      }
-    },
+  if (min_distance_item) {
+    return min_distance_item.id;
+  } else {
+    return 0;
+  }
+};
 
-    _onClick(index) {
-      return this.innerData[index].itemHandler.onClick?.();
-    },
+const onKeyDown = (ev) => {
+  if (innerData.length == 0) {
+    const edgeDirectionMap = {
+      37: EdgeDirection.left,
+      38: EdgeDirection.top,
+      39: EdgeDirection.right,
+      40: EdgeDirection.bottom,
+    };
+    if (typeof edgeDirectionMap[ev.keyCode] !== "undefined") {
+      props.onEdge?.({
+        direction: edgeDirectionMap[ev.keyCode],
+        rect: {
+          x: 0,
+          y: 0,
+          width: 0,
+          height: 0,
+        },
+      });
+      return true;
+    }
+    return false;
+  }
+  let horizontal_direction = 0;
+  let vertical_direction = 0;
+  switch (ev.keyCode) {
+    case 37:
+      horizontal_direction = -1;
+      _moveToNext(horizontal_direction, vertical_direction);
+      break;
+    case 38:
+      vertical_direction = -1;
+      _moveToNext(horizontal_direction, vertical_direction);
+      break;
+    case 39:
+      horizontal_direction = 1;
+      _moveToNext(horizontal_direction, vertical_direction);
+      break;
+    case 40:
+      vertical_direction = 1;
+      _moveToNext(horizontal_direction, vertical_direction);
+      break;
+    case 13:
+      onItemClick(templateParser.FocusIdToIndex(focusId));
+      break;
+    default:
+      //只接受上下左右确定键
+      return false;
+  }
+  return true;
+};
 
-    onKeyDown(ev) {
-      if (this.innerData.length == 0) {
-        const edgeDirectionMap = {
-          37: EdgeDirection.left,
-          38: EdgeDirection.top,
-          39: EdgeDirection.right,
-          40: EdgeDirection.bottom,
-        };
-        if (typeof edgeDirectionMap[ev.keyCode] !== "undefined") {
-          this.onEdge?.({
-            direction: edgeDirectionMap[ev.keyCode],
-            rect: {
-              x: 0,
-              y: 0,
-              width: 0,
-              height: 0,
-            },
+const _slideTo = (target, animObj) => {
+  if (props.direction === HORIZONTAL) {
+    _updatePosition(-target, 0, animObj);
+  } else {
+    _updatePosition(0, -target, animObj);
+  }
+};
+
+const _onTemplateAdd = (item) => {
+  let obj = {
+    data: item,
+    index: innerData.length,
+    controller: reactive({
+      zIndex: 0,
+    }),
+    mounted: false,
+    itemDivRef: null,
+    touchInited: false,
+    refCallback(el) {
+      if (el == null) {
+        this.touchInited = false;
+        this.customerCallback = {};
+      }
+      this.itemDivRef = el;
+    },
+    slotMounted: ref(false),
+    slotDivRef(el) {
+      if (!this.slotMounted.value && el) {
+        this.slotMounted.value = true;
+        if (callFocusAfterUpdate && this.data.id === focusId) {
+          nextTick(() => {
+            onItemFocus(templateParser.FocusIdToIndex(focusId), preEdgeRect);
           });
-          return true;
+          callFocusAfterUpdate = false;
         }
-        return false;
+      } else if (!el && this.slotMounted.value) {
+        this.slotMounted.value = false;
       }
-      let horizontal_direction = 0;
-      let vertical_direction = 0;
-      switch (ev.keyCode) {
-        case 37:
-          horizontal_direction = -1;
-          this._moveToNext(horizontal_direction, vertical_direction);
-          break;
-        case 38:
-          vertical_direction = -1;
-          this._moveToNext(horizontal_direction, vertical_direction);
-          break;
-        case 39:
-          horizontal_direction = 1;
-          this._moveToNext(horizontal_direction, vertical_direction);
-          break;
-        case 40:
-          vertical_direction = 1;
-          this._moveToNext(horizontal_direction, vertical_direction);
-          break;
-        case 13:
-          this._onClick(this.templateParser.FocusIdToIndex(this.focusId));
-          break;
-        default:
-          //只接受上下左右确定键
-          return false;
-      }
-      return true;
     },
-
-    _slideTo(target, animObj) {
-      if (this.direction === HORIZONTAL) {
-        this.rootElement.updatePosition(-target, 0, animObj);
-      } else {
-        this.rootElement.updatePosition(0, -target, animObj);
-      }
+    customerCallback: {},
+    register: {
+      register(name, func) {
+        this.customerCallback[name] = func;
+      },
+      unregister(name) {
+        delete this.customerCallback[name];
+      },
+    },
+    callbacks: {
+      callable(name) {
+        return this.slotMounted.value && this.customerCallback[name];
+      },
+      onFocus(preEdge) {
+        this.customerCallback.onFocus?.(preEdge);
+      },
+      onBlur() {
+        this.customerCallback.onBlur?.();
+      },
+      onClick() {
+        this.customerCallback.onClick?.();
+      },
+      onWidgetEdge(rect) {
+        this.customerCallback.onWidgetEdge?.(rect);
+      },
+    },
+    itemConfig: props.itemConfig?.(item.data),
+    query: {
+      id: item.id,
+      index: item.index,
+      position: _getPosition,
+      templatePosition: _getTemplatePosition,
+      absolutePosition: _getAbsolutePosition,
+      getCurrentFocusId: _getCurrentId,
+      slideTo: slideTo,
     },
+  };
+  bindFunctions(obj, obj);
+  innerData.push(obj);
+  if (item.permanent) {
+    permanentItemList.push({
+      index: innerData.length - 1,
+      alreadyShow: false,
+    });
+  }
+  const lastItem = templateParser.GetItem(-1);
+  if (props.direction == VERTICAL) {
+    touchContainerH.value = lastItem.yPos + lastItem.height - 1;
+  } else {
+    touchContainerW.value = lastItem.xPos + lastItem.width - 1;
+  }
+};
 
-    _onTemplateAdd(item) {
-      this.innerData.push({
-        data: item,
-        index: this.innerData.length,
-        controller: reactive({
-          // visible: false,
-          zIndex: 0,
-        }),
-        mounted: false,
-        itemRef: null,
-        itemHandler: {},
-        itemConfig: this.itemConfig?.(item.data),
-      });
-      if (item.permanent) {
-        this.permanentItemList.push({
-          index: this.innerData.length - 1,
-          alreadyShow: false,
-        });
+const _itemOnFocusSideEffect = (item, edgeRect) => {
+  _onFocusChange(item.data.id);
+  if (item.itemDivRef) {
+    let event = {
+      type: "focusRect",
+      direction: edgeRect?.direction?.description,
+      element: toRaw(item.itemDivRef),
+    };
+    _bubbleCustomerEvent(event);
+  }
+};
+
+const _onCustomerEvent = (ev) => {
+  if (ev.type === "focusRect") {
+    if (ev.ownerNode == exportObject) {
+      return false;
+    }
+    let item_div = ev.element;
+    let direction = 0;
+    if (props.direction == HORIZONTAL) {
+      if (ev.direction == "left") {
+        direction = -1;
+      } else if (ev.direction == "right") {
+        direction = 1;
       }
-      const lastItem = this.templateParser.GetItem(-1);
-      if (this.direction == VERTICAL) {
-        this.touchContainerH = lastItem.yPos + lastItem.height - 1;
-      } else {
-        this.touchContainerW = lastItem.xPos + lastItem.width - 1;
+    } else {
+      if (ev.direction == "top") {
+        direction = -1;
+      } else if (ev.direction == "bottom") {
+        direction = 1;
       }
-    },
+    }
+    let item_layout = getPositionRelativeToView(
+      item_div,
+      toRaw(locateDiv.value)
+    );
 
-    _onCustomerEvent(ev) {
-      if (ev.type === "focusRect") {
-        if (ev.ownerNode == this) {
-          return false;
-        }
-        let item_div = ev.element;
-        let direction = 0;
-        if (this.direction == HORIZONTAL) {
-          if (ev.direction == "left") {
-            direction = -1;
-          } else if (ev.direction == "right") {
-            direction = 1;
-          }
-        } else {
-          if (ev.direction == "top") {
-            direction = -1;
-          } else if (ev.direction == "bottom") {
-            direction = 1;
-          }
-        }
-        let item_layout = getPositionRelativeToView(
-          item_div,
-          this.$refs.rootView.getLocateDiv()
-        );
-        let obj = {
-          xPos: item_layout.left,
-          yPos: item_layout.top,
-          width: item_layout.width,
-          height: item_layout.height,
-          index: this.templateParser.FocusIdToIndex(this.focusId),
-        };
-        let cur_slide = this._calculateVisibleStart(obj, direction);
-        if (cur_slide != this.visibleStart) {
-          this.visibleStart = cur_slide;
-          this.pageUpdater.update(
-            this.templateParser,
-            this.visibleStart,
-            this.visibleStart + this.visibleRangeWithPadding - 1,
-            this.focusId,
-            true,
-            this.permanentItemList
-          );
-          this.pageUpdater.applyTmp();
-          this._slideTo(this.visibleStart, {
-            easing: "",
-            onstart: null,
-            speed: this.slideSetting.Speed,
-            onend: this._onSlideEnd,
-          });
+    let obj = {
+      xPos: item_layout.left,
+      yPos: item_layout.top,
+      width: item_layout.width,
+      height: item_layout.height,
+      index: templateParser.FocusIdToIndex(focusId),
+    };
 
-          return true;
-        }
+    let cur_slide = _calculateVisibleStart(obj, direction);
+    if (cur_slide != visibleInfo.start) {
+      visibleInfo.start = cur_slide;
+      pageUpdater.update(
+        templateParser,
+        visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
+        Math.min(
+          visibleInfo.startMax +
+            visibleInfo.range +
+            visibleInfo.padding.end -
+            1,
+          visibleInfo.endWithPadding + props.keepTraceRange * pageRange
+        ),
+        focusId,
+        true,
+        permanentItemList
+      );
+      pageUpdater.applyTmp();
+      _slideTo(visibleInfo.start, {
+        easing: "",
+        onstart: null,
+        speed: props.slideSetting.Speed,
+        onend: _onSlideEnd,
+      });
+      return true;
+    }
+  }
+  return false;
+};
+
+const _bubbleCustomerEvent = (event) => {
+  if (props.sendFocusRectEvent && event) {
+    event.ownerNode = exportObject;
+    toRaw(focusNode.value)?.bubbleCustomerEvent(event);
+  }
+};
+
+const _moveToNext = (
+  horizontal_direction,
+  vertical_direction,
+  item_edge_rect
+) => {
+  let cur_focus_item = templateParser.GetItemById(focusId);
+  let next_item_id = templateParser.GetNextItem(
+    focusId,
+    vertical_direction,
+    horizontal_direction,
+    props.loopFocus
+  );
+  if (next_item_id >= 0) {
+    preFocusId = focusId;
+    let next_focus_item = templateParser.GetItemById(next_item_id);
+    templateItemAdder.tryAddItem(next_focus_item, 1);
+    focusId = next_focus_item.id;
+
+    let direction =
+      props.direction === VERTICAL ? vertical_direction : horizontal_direction;
+
+    let cur_visible_start = _calculateVisibleStart(next_focus_item, direction);
+    if (
+      !innerData[templateParser.FocusIdToIndex(next_item_id)].itemConfig
+        ?.takeOverSlide &&
+      visibleInfo.start !== cur_visible_start
+    ) {
+      if (next_focus_item.doSlide) {
+        visibleInfo.start = cur_visible_start;
+        let animObj = {
+          easing: "",
+          onstart: null,
+          speed: props.slideSetting.Speed,
+          onend: _onSlideEnd,
+        };
+        _slideTo(visibleInfo.start, animObj);
       }
-      return false;
-    },
+      pageUpdater.update(
+        templateParser,
+        visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
+        Math.min(
+          visibleInfo.startMax +
+            visibleInfo.range +
+            visibleInfo.padding.end -
+            1,
+          visibleInfo.endWithPadding + props.keepTraceRange * pageRange
+        ),
+        next_item_id,
+        false,
+        permanentItemList
+      );
+      pageUpdater.applyTmp();
+    }
 
-    _bubbleCustomerEvent(event) {
-      if (this.sendFocusRectEvent && event) {
-        event.ownerNode = this;
-        this.$refs.focusNode?.bubbleCustomerEvent(event);
+    let rect;
+    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;
+      rect = item_edge_rect;
+    } else {
+      let direction;
+      if (horizontal_direction > 0) {
+        direction = EdgeDirection.right;
+      } else if (horizontal_direction < 0) {
+        direction = EdgeDirection.left;
+      } else if (vertical_direction > 0) {
+        direction = EdgeDirection.bottom;
+      } else if (vertical_direction < 0) {
+        direction = EdgeDirection.top;
       }
-    },
+      rect = {
+        direction,
+        rect: {
+          x: x_off_set,
+          y: y_off_set,
+          width: cur_focus_item.width,
+          height: cur_focus_item.height,
+        },
+      };
+    }
+    preEdgeRect = rect;
+    _updateBlurItem();
+    _updateFocusItem();
+    onItemBlur(templateParser.FocusIdToIndex(preFocusId));
+    onItemFocus(templateParser.FocusIdToIndex(focusId), preEdgeRect);
+  } else {
+    let x_off_set = props.direction === VERTICAL ? 0 : visibleInfo.start;
+    let y_off_set = props.direction === VERTICAL ? visibleInfo.start : 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,
+    };
+    props.onEdge?.({ direction: edge, rect: rect });
+    innerData[templateParser.FocusIdToIndex(focusId)].callbacks.onWidgetEdge?.({
+      direction: edge,
+    });
+  }
+};
 
-    _moveToNext(horizontal_direction, vertical_direction, item_edge_rect) {
-      let cur_focus_item = this.templateParser.GetItemById(this.focusId);
-      let next_item_id = this.templateParser.GetNextItem(
-        this.focusId,
-        vertical_direction,
-        horizontal_direction,
-        this.loopFocus
+const _calculateVisibleStart = (target_item, direction) => {
+  if (!target_item) {
+    console.error("MetroWidget: _calculateVisibleStart target item is null");
+    return 0;
+  }
+  preAnchorItemIndex = target_item.index;
+  let pos_key = directionFreeKeyMap.pos[vertical];
+  let size_key = directionFreeKeyMap.size[vertical];
+  let center_key = directionFreeKeyMap.center[vertical];
+  let new_visible_start = visibleInfo.start;
+
+  switch (props.slideSetting.Type) {
+    case SlideSetting.Type.FIX_POSITION:
+      //FIX_POSITION 模式会将当前 item 的中心固定到指定位置
+      new_visible_start = Math.ceil(
+        target_item[center_key] -
+          visibleInfo.range * props.slideSetting.FixPercent
       );
-      if (next_item_id >= 0) {
-        this.preFocusId = this.focusId;
-        let next_focus_item = this.templateParser.GetItemById(next_item_id);
-        this.templateItemAdder.tryAddItem(next_focus_item, 1);
-        this.focusId = next_focus_item.id;
-
-        let direction =
-          this.direction === VERTICAL
-            ? vertical_direction
-            : horizontal_direction;
-
-        let cur_visible_start = this._calculateVisibleStart(
-          next_focus_item,
-          direction
-        );
+      break;
+    case SlideSetting.Type.WHOLE_PAGE:
+      new_visible_start = templateParser.GetItem(target_item.pageHeadIndex)[
+        pos_key
+      ];
+      break;
+    case SlideSetting.Type.SEAMLESS:
+      if (direction > 0) {
         if (
-          !this.innerData[this.templateParser.FocusIdToIndex(next_item_id)]
-            .itemConfig?.takeOverSlide &&
-          this.visibleStart !== cur_visible_start
+          target_item[pos_key] + target_item[size_key] >
+          visibleInfo.start + visibleInfo.range * props.slideSetting.EndPercent
         ) {
-          if (next_focus_item.doSlide) {
-            this.visibleStart = cur_visible_start;
-            let animObj = {
-              easing: "",
-              onstart: null,
-              speed: this.slideSetting.Speed,
-              onend: this._onSlideEnd,
-            };
-            this._slideTo(this.visibleStart, animObj);
-          }
-          this.pageUpdater.update(
-            this.templateParser,
-            cur_visible_start,
-            cur_visible_start + this.visibleRangeWithPadding - 1,
-            next_item_id,
-            false,
-            this.permanentItemList
-          );
-          this.pageUpdater.applyTmp();
-        }
-
-        let rect;
-        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;
-          rect = item_edge_rect;
-        } else {
-          let direction;
-          if (horizontal_direction > 0) {
-            direction = EdgeDirection.right;
-          } else if (horizontal_direction < 0) {
-            direction = EdgeDirection.left;
-          } else if (vertical_direction > 0) {
-            direction = EdgeDirection.bottom;
-          } else if (vertical_direction < 0) {
-            direction = EdgeDirection.top;
-          }
-          rect = {
-            direction,
-            rect: {
-              x: x_off_set,
-              y: y_off_set,
-              width: cur_focus_item.width,
-              height: cur_focus_item.height,
-            },
-          };
-        }
-        this.preEdgeRect = rect;
-        this._updateBlurItem();
-        this._updateFocusItem();
-        if (this.isFocus) {
-          this.innerData[
-            this.templateParser.FocusIdToIndex(this.preFocusId)
-          ].itemHandler.onBlur?.();
+          new_visible_start =
+            target_item[pos_key] +
+            target_item[size_key] -
+            visibleInfo.range * props.slideSetting.EndPercent;
         }
+      } else if (direction < 0) {
         if (
-          this.isFocus &&
-          this.innerData[this.templateParser.FocusIdToIndex(this.focusId)]
-            .mounted
+          target_item[pos_key] <
+          visibleInfo.start +
+            visibleInfo.range * props.slideSetting.StartPercent
         ) {
-          this.innerData[
-            this.templateParser.FocusIdToIndex(this.focusId)
-          ].itemHandler.onFocus?.(this.preEdgeRect);
+          new_visible_start =
+            target_item[pos_key] -
+            visibleInfo.range * props.slideSetting.StartPercent;
         }
       } 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: 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 });
+        //不是沿widget方向的移动
+        if (target_item[pos_key] < visibleInfo.start) {
+          new_visible_start =
+            target_item[pos_key] -
+            visibleInfo.range * props.slideSetting.StartPercent;
+        } else if (
+          target_item[pos_key] + target_item[size_key] >
+          visibleInfo.end
+        ) {
+          new_visible_start =
+            target_item[pos_key] +
+            target_item[size_key] -
+            visibleInfo.range * props.slideSetting.EndPercent;
         }
-        this.innerData[
-          this.templateParser.FocusIdToIndex(this.focusId)
-        ].itemHandler.reachEdge?.({
-          direction: edge,
-        });
       }
-    },
+      break;
+    default:
+      console.error(
+        "MetroWidget: undefined slide type",
+        props.slideSetting.Type
+      );
+  }
 
-    _adjustToValidPosition(visible_start, adjust_end) {
-      //TODO 优化
-      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 visible_range =
-        (this.direction === VERTICAL ? this.height : this.width) -
-        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 (adjust_end && visible_start > last_item_off_set) {
-        return last_item_off_set;
-      } else if (visible_start < 0) {
-        return 0;
-      } else {
-        return visible_start;
-      }
-    },
+  if ((props.slideSetting.BoundaryProtect & SlideSetting.START_PROTECT) > 0) {
+    let boundary = 0;
+    if (!templateParser.GetItem(0).focusable) {
+      //首个元素是占位符
+      boundary = templateParser.GetItem(0)[size_key];
+    }
+    new_visible_start = new_visible_start < boundary ? 0 : new_visible_start;
+  }
+  if ((props.slideSetting.BoundaryProtect & SlideSetting.END_PROTECT) > 0) {
+    let last_item = templateParser.GetItem(-1);
+    let last_visible_start =
+      last_item[pos_key] + last_item[size_key] - visibleInfo.range;
+    last_visible_start = last_visible_start < 0 ? 0 : last_visible_start;
+    let boundary = last_visible_start;
+    if (!last_item.focusable) {
+      //最后个元素是占位符
+      boundary = last_item[pos_key] - visibleInfo.range;
+    }
+    new_visible_start =
+      new_visible_start > boundary ? last_visible_start : new_visible_start;
+  }
+  return new_visible_start;
+};
 
-    _calculateVisibleStart(target_item, direction) {
-      if (!target_item) {
-        console.error(
-          "MetroWidget: _calculateVisibleStart target item is null"
-        );
-        return 0;
-      }
-      this.preAnchorItemIndex = target_item.index;
-      let pos_key = directionFreeKeyMap.pos[this.vertical];
-      let size_key = directionFreeKeyMap.size[this.vertical];
-      let center_key = directionFreeKeyMap.center[this.vertical];
-      let new_visible_start = this.visibleStart;
-
-      switch (this.slideSetting.Type) {
-        case SlideSetting.Type.FIX_POSITION:
-          //FIX_POSITION 模式会将当前 item 的中心固定到指定位置
-          new_visible_start = Math.ceil(
-            target_item[center_key] -
-              this.visibleRange * this.slideSetting.FixPercent
-          );
-          break;
-        case SlideSetting.Type.WHOLE_PAGE:
-          new_visible_start = this.templateParser.GetItem(
-            target_item.pageHeadIndex
-          )[pos_key];
-          break;
-        case SlideSetting.Type.SEAMLESS:
-          if (direction > 0) {
-            if (
-              target_item[pos_key] + target_item[size_key] >
-              this.visibleStart +
-                this.visibleRange * this.slideSetting.EndPercent
-            ) {
-              new_visible_start =
-                target_item[pos_key] +
-                target_item[size_key] -
-                this.visibleRange * this.slideSetting.EndPercent;
-            }
-          } else if (direction < 0) {
-            if (
-              target_item[pos_key] <
-              this.visibleStart +
-                this.visibleRange * this.slideSetting.StartPercent
-            ) {
-              new_visible_start =
-                target_item[pos_key] -
-                this.visibleRange * this.slideSetting.StartPercent;
-            }
-          } else {
-            //不是沿widget方向的移动
-            if (target_item[pos_key] < this.visibleStart) {
-              new_visible_start =
-                target_item[pos_key] -
-                this.visibleRange * this.slideSetting.StartPercent;
-            } else if (
-              target_item[pos_key] + target_item[size_key] >
-              this.visibleStart + this.visibleRange
-            ) {
-              new_visible_start =
-                target_item[pos_key] +
-                target_item[size_key] -
-                this.visibleRange * this.slideSetting.EndPercent;
-            }
-          }
-          break;
-        default:
-          console.error(
-            "MetroWidget: undefined slide type",
-            this.slideSetting.Type
-          );
-      }
+const _onFocusableItemEdge = (edge_info) => {
+  let horizontal_direction = 0;
+  let vertical_direction = 0;
+  switch (edge_info.direction) {
+    case EdgeDirection.left:
+      horizontal_direction = -1;
+      break;
+    case EdgeDirection.right:
+      horizontal_direction = 1;
+      break;
+    case EdgeDirection.top:
+      vertical_direction = -1;
+      break;
+    case EdgeDirection.bottom:
+      vertical_direction = 1;
+      break;
+    default:
+      break;
+  }
+  _moveToNext(horizontal_direction, vertical_direction, edge_info);
+};
 
-      if (
-        (this.slideSetting.BoundaryProtect & SlideSetting.START_PROTECT) >
-        0
-      ) {
-        let boundary = 0;
-        if (!this.templateParser.GetItem(0).focusable) {
-          //首个元素是占位符
-          boundary = this.templateParser.GetItem(0)[size_key];
-        }
-        new_visible_start =
-          new_visible_start < boundary ? 0 : new_visible_start;
-      }
-      if ((this.slideSetting.BoundaryProtect & SlideSetting.END_PROTECT) > 0) {
-        let last_item = this.templateParser.GetItem(-1);
-        let last_visible_start =
-          last_item[pos_key] + last_item[size_key] - this.visibleRange;
-        last_visible_start = last_visible_start < 0 ? 0 : last_visible_start;
-        let boundary = last_visible_start;
-        if (!last_item.focusable) {
-          //最后个元素是占位符
-          boundary = last_item[pos_key] - this.visibleRange;
-        }
-        new_visible_start =
-          new_visible_start > boundary ? last_visible_start : new_visible_start;
-      }
-      return new_visible_start;
-    },
+const _ifValidEnterRect = (rect_info) => {
+  return rect_info && rect_info.direction && rect_info.rect;
+};
 
-    _onFocusableItemEdge(edge_info) {
-      let horizontal_direction = 0;
-      let vertical_direction = 0;
-      switch (edge_info.direction) {
-        case EdgeDirection.left:
-          horizontal_direction = -1;
-          break;
-        case EdgeDirection.right:
-          horizontal_direction = 1;
-          break;
-        case EdgeDirection.top:
-          vertical_direction = -1;
-          break;
-        case EdgeDirection.bottom:
-          vertical_direction = 1;
-          break;
-        default:
-          break;
-      }
-      this._moveToNext(horizontal_direction, vertical_direction, edge_info);
-    },
+const _setZIndex = (index, z_index) => {
+  if (innerData[index]) {
+    innerData[index].controller.zIndex = z_index;
+  }
+};
 
-    _ifValidEnterRect(rect_info) {
-      return rect_info && rect_info.direction && rect_info.rect;
-    },
+const _onFocus = (params) => {
+  isFocus = true;
+  preFocusId = -1;
+  if (innerData.length === 0) {
+    console.warn(`MetroWidget: ${props.name} get focus while data is empty.`);
+    return;
+  }
+  let focus_id =
+    typeof enterFocusId !== "undefined" &&
+    enterFocusId >= 0 &&
+    enterFocusId < templateParser.GetTemplate().List.length
+      ? enterFocusId
+      : focusId;
+  focus_id = _ifValidEnterRect(enterFocusRect)
+    ? _calculateNearestItemByRect(pageUpdater.getRange(), enterFocusRect)
+    : focus_id;
+  preEdgeRect = enterFocusRect;
+  focusId = focus_id;
+  enterFocusId = -1;
+  enterFocusRect = null;
+  _updateFocusItem();
+  onItemFocus(templateParser.FocusIdToIndex(focusId), preEdgeRect);
+  props.onFocus?.();
+};
 
-    _setZIndex(index, z_index) {
-      if (this.innerData[index]) {
-        this.innerData[index].controller.zIndex = z_index;
-      }
-    },
+const _onBlur = () => {
+  isFocus = false;
+  enterFocusId = -1;
+  enterFocusRect = null;
+  preEdgeRect = null;
+  if (innerData.length === 0) {
+    return;
+  }
+  preFocusId = focusId;
+  _updateBlurItem();
+  innerData[templateParser.FocusIdToIndex(preFocusId)].callbacks.onBlur();
 
-    _onFocus() {
-      this.isFocus = true;
-      this.preFocusId = -1;
-      if (this.innerData.length === 0) {
-        console.warn(
-          `MetroWidget: ${this.name} get focus while data is empty.`
-        );
-        return;
-      }
-      let focus_id =
-        typeof this.enterFocusId !== "undefined" &&
-        this.enterFocusId >= 0 &&
-        this.enterFocusId < this.templateParser.GetTemplate().List.length
-          ? this.enterFocusId
-          : this.focusId;
-      focus_id = this._ifValidEnterRect(this.enterFocusRect)
-        ? this._calculateNearestItemByRect(
-            this.pageUpdater.getRange(),
-            this.enterFocusRect
-          )
-        : focus_id;
-      this.preEdgeRect = this.enterFocusRect;
-      this.focusId = focus_id;
-      this.enterFocusId = -1;
-      this.enterFocusRect = null;
-      this._updateFocusItem();
-      if (
-        this.isFocus &&
-        this.innerData[this.templateParser.FocusIdToIndex(this.focusId)].mounted
-      ) {
-        this.innerData[
-          this.templateParser.FocusIdToIndex(this.focusId)
-        ].itemHandler.onFocus?.(this.preEdgeRect);
-      }
+  props.onBlur?.();
+};
 
-      if (this.onFocus) {
-        this.onFocus();
-      }
-    },
+const _onSlideEnd = (event) => {
+  if (event && event.stopPropagation) {
+    event.stopPropagation();
+  }
+  pageUpdater.apply();
+};
 
-    _onBlur() {
-      this.isFocus = false;
-      this.enterFocusId = -1;
-      this.enterFocusRect = null;
-      this.preEdgeRect = null;
-      if (this.innerData.length === 0) {
-        return;
-      }
-      this.preFocusId = this.focusId;
-      this._updateBlurItem();
-      this.innerData[
-        this.templateParser.FocusIdToIndex(this.preFocusId)
-      ].itemHandler.onBlur?.();
-
-      if (this.onBlur) {
-        this.onBlur();
-      }
-    },
+const _updateFocusItem = () => {
+  _setZIndex(templateParser.FocusIdToIndex(focusId), innerData.length);
+};
 
-    _onSlideEnd(event) {
-      if (event && event.stopPropagation) {
-        event.stopPropagation();
-      }
-      this.pageUpdater.apply();
-    },
+const _updateBlurItem = () => {
+  _setZIndex(templateParser.FocusIdToIndex(preFocusId), 0);
+};
 
-    _onContentUpdate() {
-      this._updateFocusItem();
-    },
+const _updateFocusByDragInfo = (viewX, viewY) => {
+  let enterFocusRect = null;
+  //模拟最小区域作为输入区域
+  if (props.direction === VERTICAL) {
+    enterFocusRect = {
+      direction: EdgeDirection.top,
+      rect: {
+        x: props.left - viewX,
+        y: props.top - viewY,
+        width: 10,
+        height: 10,
+      },
+    };
+  } else {
+    enterFocusRect = {
+      direction: EdgeDirection.left,
+      rect: {
+        x: props.left - viewX,
+        y: props.top - viewY,
+        width: 10,
+        height: 10,
+      },
+    };
+  }
+  focusId = _calculateNearestItemByRect(pageUpdater.getRange(), enterFocusRect);
+};
 
-    _updateFocusItem() {
-      this._setZIndex(
-        this.templateParser.FocusIdToIndex(this.focusId),
-        this.innerData.length
-      );
-    },
+const _onDragUpdateItem = (visible_start, visible_end) => {
+  templateItemAdder.tryAddItemByPosition(visible_end);
+  pageUpdater.update(
+    templateParser,
+    visible_start,
+    visible_end,
+    0,
+    false,
+    permanentItemList
+  );
+  pageUpdater.apply();
 
-    _updateBlurItem() {
-      this._setZIndex(this.templateParser.FocusIdToIndex(this.preFocusId), 0);
-    },
+  Forge.sRenderBridge.InstantPerformSwap();
+};
 
-    _updateFocusByDragInfo(viewX, viewY) {
-      let enterFocusRect = null;
-      //模拟最小区域作为输入区域
-      if (this.direction === VERTICAL) {
-        enterFocusRect = {
-          direction: EdgeDirection.top,
-          rect: {
-            x: this.left - viewX,
-            y: this.top - viewY,
-            width: 10,
-            height: 10,
-          },
-        };
-      } else {
-        enterFocusRect = {
-          direction: EdgeDirection.left,
-          rect: {
-            x: this.left - viewX,
-            y: this.top - viewY,
-            width: 10,
-            height: 10,
-          },
-        };
+const _getTouchListener = () => {
+  if (!props.enableTouch) {
+    return null;
+  }
+  let callback = {
+    OnDragStart: (msg) => {
+      if (mounted) {
+        Promise.resolve().then(() => {
+          let cur_visible_start = visibleInfo.start - pageRange * 2;
+          let cur_visible_end = visibleInfo.start + pageRange * 3 - 1;
+          preUpdateVisibleStart = cur_visible_start;
+          _onDragUpdateItem(cur_visible_start, cur_visible_end);
+        });
       }
-      this.focusId = this._calculateNearestItemByRect(
-        this.pageUpdater.getRange(),
-        enterFocusRect
-      );
-    },
-
-    _registerRootView(ele) {
-      this.rootElement = ele;
-    },
-
-    _onDragUpdateItem(visible_start, visible_end) {
-      this.templateItemAdder.tryAddItemByPosition(visible_end);
-      let baseItemId = this.visibleRangeSearchBaseItem
-        ? this.visibleRangeSearchBaseItem
-        : 0;
-      this.pageUpdater.update(
-        this.templateParser,
-        visible_start,
-        visible_end,
-        baseItemId,
-        false,
-        this.permanentItemList
-      );
-      this.pageUpdater.apply();
-
-      Forge.sRenderBridge.InstantPerformSwap();
+      return true;
     },
-
-    _getTouchListener() {
-      if (!this.enableTouch) {
-        return null;
-      }
-      let callback = {
-        OnDragStart: (msg) => {
-          //删除焦点
-          if (this.mounted) {
-            Promise.resolve().then(() => {
-              let cur_visible_start =
-                this.visibleStart - this.visibleRangeWithPadding * 2;
-              let cur_visible_end =
-                this.visibleStart + this.visibleRangeWithPadding * 3 - 1;
-              this.preUpdateVisibleStart = cur_visible_start;
-              this._onDragUpdateItem(cur_visible_start, cur_visible_end);
-            });
+    OnMoved: (msg) => {
+      if (mounted) {
+        Promise.resolve().then(() => {
+          if (
+            typeof msg.viewY != "undefined" &&
+            typeof msg.viewX != "undefined"
+          ) {
+            if (props.direction === VERTICAL) {
+              visibleInfo.start = -msg.viewY;
+            } else {
+              visibleInfo.start = -msg.viewX;
+            }
+            if (visibleInfo.start < 0) {
+              visibleInfo.start = 0;
+            }
           }
-          return true;
-        },
-        OnMoved: (msg) => {
-          if (this.mounted) {
-            Promise.resolve().then(() => {
-              if (
-                typeof msg.viewY != "undefined" &&
-                typeof msg.viewX != "undefined"
-              ) {
-                if (this.direction === VERTICAL) {
-                  this.visibleStart = -msg.viewY;
-                } else {
-                  this.visibleStart = -msg.viewX;
-                }
-                if (this.visibleStart < 0) {
-                  this.visibleStart = 0;
-                }
-              }
-              if (
-                Math.abs(this.visibleStart - this.preUpdateVisibleStart) <=
-                this.visibleRangeWithPadding
-              ) {
-                let cur_visible_start =
-                  this.visibleStart - this.visibleRangeWithPadding * 2;
-                let cur_visible_end =
-                  this.visibleStart + this.visibleRangeWithPadding * 3 - 1;
-                this.preUpdateVisibleStart = cur_visible_start;
-                this._onDragUpdateItem(cur_visible_start, cur_visible_end);
-              }
-            });
+          if (
+            Math.abs(visibleInfo.start - preUpdateVisibleStart) <= pageRange
+          ) {
+            let cur_visible_start = visibleInfo.start - pageRange * 2;
+            let cur_visible_end = visibleInfo.start + pageRange * 3 - 1;
+            preUpdateVisibleStart = cur_visible_start;
+            _onDragUpdateItem(cur_visible_start, cur_visible_end);
           }
+        });
+      }
 
-          return true;
-        },
-        OnDragEnd: (msg) => {
-          this.$refs.rootView?.updatePosition(msg["viewX"], msg["viewY"], null);
-          this.preUpdateVisibleStart = this.visibleStart;
-          this._onDragUpdateItem(
-            this.visibleStart,
-            this.visibleStart + this.visibleRangeWithPadding - 1
-          );
-          this._updateFocusByDragInfo(msg["viewX"], msg["viewY"]);
-          return true;
-        },
-        OnFling: (msg) => {
-          this.$refs.rootView?.updatePosition(msg["viewX"], msg["viewY"], null);
-          this.preUpdateVisibleStart = this.visibleStart;
-          this._onDragUpdateItem(
-            this.visibleStart,
-            this.visibleStart + this.visibleRangeWithPadding - 1
-          );
-          this._updateFocusByDragInfo(msg["viewX"], msg["viewY"]);
-          return true;
-        },
-        OnRelease: (msg) => {
-          return true;
-        },
-      };
-      return callback;
+      return true;
     },
-    _getFocusBlockActions() {
-      return {
-        onFocus: this._onFocus,
-        onBlur: this._onBlur,
-        onKeyDown: this.onKeyDown,
-        onCustomerEvent: this._onCustomerEvent,
-      };
+    OnDragEnd: (msg) => {
+      _updatePosition(msg["viewX"], msg["viewY"], null);
+      preUpdateVisibleStart = visibleInfo.start;
+      _onDragUpdateItem(
+        visibleInfo.startWithPadding,
+        visibleInfo.endWithPadding
+      );
+      _updateFocusByDragInfo(msg["viewX"], msg["viewY"]);
+      return true;
     },
-    _updatePage(range_list) {
-      let list = [];
-      for (let range of range_list) {
-        list = list.concat(this.innerData.slice(range.start, range.end + 1));
-      }
-      this.$refs.rootView?.updateData(list);
-      this.refreshToken++;
-      this.itemRender = false;
-      clearTimeout(this.updateTimerHandler);
-      this.updateTimerHandler = setTimeout(() => {
-        this.itemRender = true;
-      }, 0);
+    OnFling: (msg) => {
+      _updatePosition(msg["viewX"], msg["viewY"], null);
+      preUpdateVisibleStart = visibleInfo.start;
+      _onDragUpdateItem(
+        visibleInfo.startWithPadding,
+        visibleInfo.endWithPadding
+      );
+      _updateFocusByDragInfo(msg["viewX"], msg["viewY"]);
+      return true;
     },
-  },
-  created() {
-    this.pageUpdater = new PageUpdater(this._updatePage);
-    if (this.dispatcher) {
-      this.dispatcher.registerComponent(this);
-    }
-    this.innerPadding = _getPadding(this.padding);
-    this.dragDirection =
-      this.direction === VERTICAL
-        ? Forge.DragSetting.DIRECTION_VERTICAL
-        : Forge.DragSetting.DIRECTION_HORIZONTAL;
-    this.visibleRange =
-      this.direction === VERTICAL
-        ? this.height - this.innerPadding.top - this.innerPadding.bottom
-        : this.width - this.innerPadding.left - this.innerPadding.right;
-    this.visibleRangeWithPadding =
-      this.direction === VERTICAL ? this.height : this.width;
-
-    if (this.provideData) {
-      this.dataList = this.provideData();
-    } else if (this.data) {
-      this.dataList = this.data;
-    }
+    OnRelease: (msg) => {
+      return true;
+    },
+  };
+  return callback;
+};
 
-    this.templateParser = _getTemplateParser(
-      this.width,
-      this.height,
-      this.direction,
-      this.padding,
-      this.supportHistoryPath,
-      this.layoutType
-    );
-    this.templateItemAdder = new TemplateItemAdder(
-      this.templateParser,
-      this.dataList,
-      this.measures,
-      this.visibleRangeWithPadding,
-      this._onTemplateAdd
-    );
-    this.templateItemAdder.tryAddItem(null, 2);
-    let template_list = this.templateParser.GetTemplate().List;
-    let last_item = template_list[template_list.length - 1];
-    if (last_item) {
-      this.touchListener = this._getTouchListener();
-      this.touchContainerW =
-        this.direction === VERTICAL
-          ? this.width
-          : last_item.xPos + last_item.width;
-      this.touchContainerH =
-        this.direction === VERTICAL
-          ? last_item.yPos + last_item.height
-          : this.height;
-    }
-    this.slidePile = new Forge.RectArea(
-      0,
-      0,
-      this.width - this.innerPadding.left - this.innerPadding.right,
-      this.height - this.innerPadding.top - this.innerPadding.bottom
-    );
-    let init_focus_id = 0;
-    let cur_visible_start = 0;
-
-    if (this.initFocusId) {
-      this.templateItemAdder.tryAddItemById(this.initFocusId);
-      const item = this.templateParser.GetItemById(this.initFocusId);
-      if (item) {
-        init_focus_id = this.initFocusId;
-        cur_visible_start = this._calculateVisibleStart(item, 1);
-      }
+const _updatePage = (range_list) => {
+  let list = [];
+  for (let range of range_list) {
+    list = list.concat(innerData.slice(range.start, range.end + 1));
+  }
+  renderData.value = list;
+  if (props.enableItemRenderBreak) {
+    itemRender.value = false;
+    nextTick(() => {
+      itemRender.value = true;
+    });
+  }
+};
+
+const _onScroll = () => {
+  if (props.onScroll) {
+    const lastItem = templateParser.GetItem(-1);
+    let totalWidth;
+    if (vertical) {
+      totalWidth = lastItem.yPos + lastItem.height - 1;
+    } else {
+      totalWidth = lastItem.xPos + lastItem.width - 1;
     }
-    this.focusId = init_focus_id;
-    this.visibleStart = cur_visible_start;
-  },
-  mounted() {
-    if (this.visibleStart) {
-      this._slideTo(this.visibleStart, null);
+    props.onScroll(visibleInfo.start, visibleInfo.range, totalWidth);
+  }
+};
+
+//之前rootview相关的代码
+const _updatePosition = (x, y, anim_info) => {
+  if (toRaw(slideDiv.value)) {
+    let pre_pos = toRaw(slideDiv.value).jsvMaskView.GetLayoutParams();
+    //jsvMaskView的位置更新时会被设置位0，因此不能通过ResetLayoutParams设置位置
+    slideDivLeft.value = x;
+    slideDivTop.value = y;
+    if (anim_info) {
+      let delta_x = Math.abs(pre_pos.MarginLeft - x);
+      let delta_y = Math.abs(pre_pos.MarginTop - y);
+      let duration = Math.round(
+        delta_x === 0 ? delta_y / anim_info.speed : delta_x / anim_info.speed
+      );
+      let slide_animation = new Forge.TranslateAnimation(
+        pre_pos.MarginLeft - x,
+        0,
+        pre_pos.MarginTop - y,
+        0,
+        duration,
+        anim_info.easing
+      );
+      slide_animation.SetAnimationListener(
+        new Forge.AnimationListener(anim_info.onstart, anim_info.onend, null)
+      );
+      toRaw(slideDiv.value).jsvMaskView.StartAnimation(slide_animation);
     }
-    this.pageUpdater.update(
-      this.templateParser,
-      this.visibleStart,
-      this.visibleStart + this.visibleRangeWithPadding - 1,
-      0,
+    _onScroll();
+  }
+};
+
+const _initRootTouch = () => {
+  if (props.enableTouch && toRaw(slideDiv.value)) {
+    let view = toRaw(slideDiv.value).jsvMaskView;
+    var drag_setting = new Forge.DragSetting(
+      dragDirection,
+      20,
       false,
-      this.permanentItemList
+      slidePile,
+      props.flingPageWidth,
+      props.flingPageEdge
     );
-    this.pageUpdater.apply();
-    this.mounted = true;
-  },
-  beforeUnmount() {
-    this.mounted = false;
-    if (this.dispatcher) {
-      this.dispatcher.unregisterComponent();
+    view.EnableDrag(drag_setting, touchListener, "translateMat(dx,dy,0)");
+  }
+};
+
+const _initItemViewTouch = (itemDivRef, index) => {
+  if (props.enableTouch) {
+    if (itemDivRef) {
+      // 为view添加触控处理
+      let view = itemDivRef.jsvMaskView;
+      let dragSetting = new Forge.DragSetting(
+        Forge.DragSetting.DIRECTION_DISABLE,
+        20,
+        false,
+        new Forge.RectArea(0, 0, 0, 0),
+        -1,
+        3 / 4
+      );
+      let callback = {
+        OnTap: (msg) => {
+          return onItemClick(index);
+        },
+      };
+      view.EnableDrag(dragSetting, callback, "translateMat(dx,dy,0)");
     }
-    clearTimeout(this.updateTimerHandler);
-  },
+  }
 };
 
-export default MetroWidget;
+//init
+pageUpdater = new PageUpdater(_updatePage);
+if (props.dispatcher) {
+  props.dispatcher.registerComponent(exportObject);
+}
+innerPadding = _getPadding(props.padding);
+dragDirection = vertical
+  ? Forge.DragSetting.DIRECTION_VERTICAL
+  : Forge.DragSetting.DIRECTION_HORIZONTAL;
+visibleInfo.range = vertical
+  ? props.height - innerPadding.top - innerPadding.bottom
+  : props.width - innerPadding.left - innerPadding.right;
+visibleInfo.padding = vertical
+  ? { start: innerPadding.top, end: innerPadding.bottom }
+  : { start: innerPadding.left, end: innerPadding.right };
+
+if (props.provideData) {
+  dataList = toRaw(props.provideData());
+} else if (props.data) {
+  dataList = toRaw(props.data);
+}
+
+templateParser = _getTemplateParser(
+  props.width,
+  props.height,
+  props.direction,
+  props.padding,
+  props.supportHistoryPath,
+  props.layoutType
+);
+templateItemAdder = new TemplateItemAdder(
+  templateParser,
+  dataList,
+  props.measures,
+  pageRange,
+  _onTemplateAdd
+);
+if (props.onScroll) {
+  templateItemAdder.tryAddItemByIndex(dataList.length - 1);
+} else {
+  templateItemAdder.tryAddItem(null, 2);
+}
+
+let template_list = templateParser.GetTemplate().List;
+
+//触控相关
+let last_item = template_list[template_list.length - 1];
+if (last_item) {
+  touchListener = _getTouchListener();
+  touchContainerW.value =
+    props.direction === VERTICAL
+      ? props.width
+      : last_item.xPos + last_item.width;
+  touchContainerH.value =
+    props.direction === VERTICAL
+      ? last_item.yPos + last_item.height
+      : props.height;
+}
+slidePile = new Forge.RectArea(
+  0,
+  0,
+  props.width - innerPadding.left - innerPadding.right,
+  props.height - innerPadding.top - innerPadding.bottom
+);
+let init_focus_id = 0;
+let cur_visible_start = 0;
+
+if (props.initFocusId) {
+  templateItemAdder.tryAddItemById(props.initFocusId);
+  const item = templateParser.GetItemById(props.initFocusId);
+  if (item) {
+    init_focus_id = props.initFocusId;
+    cur_visible_start = _calculateVisibleStart(item, 1);
+  }
+}
+focusId = init_focus_id;
+visibleInfo.start = cur_visible_start;
+
+pageUpdater.update(
+  templateParser,
+  visibleInfo.startWithPadding,
+  visibleInfo.endWithPadding,
+  0,
+  false,
+  permanentItemList
+);
+let list = [];
+for (let range of pageUpdater.rangeList) {
+  list = list.concat(innerData.slice(range.start, range.end + 1));
+}
+renderData.value = list;
+
+onMounted(() => {
+  mounted = true;
+  _initRootTouch();
+  for (let item of renderData.value) {
+    _initItemViewTouch(toRaw(item.itemDivRef), item.index);
+  }
+
+  if (visibleInfo.start) {
+    _slideTo(visibleInfo.start, null);
+  }
+
+  onItemFocus(templateParser.FocusIdToIndex(focusId), preEdgeRect);
+
+  if (props.enableItemRenderBreak) {
+    nextTick(() => {
+      itemRender.value = true;
+    });
+  }
+});
+
+onUpdated(() => {
+  for (let item of renderData.value) {
+    if (!item.touchInited) {
+      _initItemViewTouch(toRaw(item.itemDivRef), item.index);
+    }
+  }
+});
+
+onBeforeUnmount(() => {
+  mounted = false;
+  if (props.dispatcher) {
+    props.dispatcher.unregisterComponent();
+  }
+});
+
+defineExpose(exportObject);
 </script>
 
 <template>
-  <jsv-focus-block
-    ref="focusNode"
-    :name="name"
-    :onAction="_getFocusBlockActions()"
+  <div
+    :style="{
+      left: left,
+      top: top,
+      width: width,
+      height: height,
+      overflow: 'hidden',
+    }"
   >
-    <div
-      ref="rootDiv"
-      :style="{
-        left: left,
-        top: top,
-        width: width,
-        height: height,
-        overflow: 'hidden',
-      }"
-    >
-      <root-view
-        ref="rootView"
-        :refreshToken="refreshToken"
-        :dataUpdateToken="dataUpdateToken"
-        :x="innerPadding.left"
-        :y="innerPadding.top"
-        :width="touchContainerW"
-        :height="touchContainerH"
-        :flingPageWidth="flingPageWidth"
-        :flingPageEdge="flingPageEdge"
-        :slidePile="slidePile"
-        :direction="dragDirection"
-        :touchListener="touchListener"
-        :enableTouch="enableTouch"
-        :loadAll="loadAll"
-        :register="_registerRootView"
-        :onLoad="_onContentUpdate"
-        :onItemEdge="_onFocusableItemEdge"
-        :widgetHandler="_injectHandler()"
-        :enableItemRenderBreak="enableItemRenderBreak"
-        :placeHolderSetting="placeHolderSetting"
+    <div :style="{ left: innerPadding.left, top: innerPadding.top }">
+      <div
+        key="touchcontainer"
+        ref="slideDiv"
+        :style="{
+          left: slideDivLeft,
+          top: slideDivTop,
+          width: touchContainerW,
+          height: touchContainerH,
+        }"
       >
-        <template v-slot:renderItem="slotProps">
-          <slot name="renderItem" v-bind="slotProps"></slot>
-        </template>
-      </root-view>
+        <div ref="locateDiv">
+          <jsv-focus-block
+            ref="focusNode"
+            :name="name"
+            :onAction="{
+              onFocus: _onFocus,
+              onBlur: _onBlur,
+              onKeyDown: onKeyDown,
+              onCustomerEvent: _onCustomerEvent,
+            }"
+          >
+            <div
+              v-for="item in renderData"
+              :key="pageUpdateToken + '_' + item.index"
+              :ref="item.refCallback"
+              :style="{
+                left: item.data.xPos,
+                top: item.data.yPos,
+                width: item.data.width,
+                height: item.data.height,
+                zIndex: item.controller.zIndex,
+              }"
+            >
+              <div
+                v-if="
+                  !enableItemRenderBreak || item.slotMounted.value || itemRender
+                "
+                :key="renderBreakKey"
+                :ref="item.slotDivRef"
+              >
+                <slot
+                  name="renderItem"
+                  :key="renderBreakKey"
+                  :data="item.data.data"
+                  :onEdge="_onFocusableItemEdge"
+                  :onAction="item.register"
+                  :query="item.query"
+                  :onItemEdge="_onFocusableItemEdge"
+                ></slot>
+              </div>
+              <div
+                v-if="
+                  enableItemRenderBreak &&
+                  placeHolderSetting &&
+                  !item.slotMounted.value
+                "
+                :style="{
+                  width:
+                    item.data.width -
+                    (placeHolderSetting.gap ? placeHolderSetting.gap : 0),
+                  height:
+                    item.data.height -
+                    (placeHolderSetting.gap ? placeHolderSetting.gap : 0),
+                  backgroundColor: placeHolderSetting.backgroundColor,
+                  borderRadius: placeHolderSetting.borderRadius,
+                }"
+              ></div>
+            </div>
+          </jsv-focus-block>
+        </div>
+      </div>
     </div>
-  </jsv-focus-block>
+  </div>
 </template>