@shijiu/jsview-vue 2.1.476-test.0 → 2.2.35

package/utils/JsViewEngineWidget/MetroWidget/MetroWidgetSetup.js

@@ -108,6 +108,19 @@ export const setup = (
     FLING: 3,
   };
 
+  let innerKeepTraceRange = 0;
+  if (typeof props.keepTraceRange > 0) {
+    innerKeepTraceRange = props.keepTraceRange;
+  } else {
+    if (props.touchFlag > 0) {
+      //触控默认3屏
+      innerKeepTraceRange = 3;
+    } else {
+      //按键模式默认0屏
+      innerKeepTraceRange = 0;
+    }
+  }
+
   const modeForExport = ref(FOCUS_MODE);
   const mode = {
     _mode: FOCUS_MODE,
@@ -171,6 +184,7 @@ export const setup = (
   let visibleInfo = new VisibleInfo();
   let preSlideDirection = 0;
   let alreadyCallItemFocus = false;
+  let innerSlideSetting = props.slideSetting
   const currentFocusIndex = ref(0);
 
   const DEFAULT_ANIMATION_DURATION = 200;
@@ -201,6 +215,7 @@ export const setup = (
 
     let existOnFocusChange = false;
     let targetVisibleStart = visibleInfo.start;
+
     //先遍历寻找slide task, 确认目标位置. 有多个slide task时取最后一个
     taskList.forEach(i => {
       if (i.type == TaskType.SLIDE) {
@@ -291,8 +306,8 @@ export const setup = (
               easing: "",
               onStart: null,
               onEnd: null,
-              speed: props.slideSetting.Speed,
-              duration: props.slideSetting.Duration,
+              speed: innerSlideSetting.Speed,
+              duration: innerSlideSetting.Duration,
             }
           }
         }
@@ -313,14 +328,8 @@ export const setup = (
     taskManager.run(() => {
       updateHandler = pageUpdater.update(
         metroTemplate,
-        visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
-        Math.min(
-          visibleInfo.startMax +
-          visibleInfo.range +
-          visibleInfo.padding.end -
-          1,
-          visibleInfo.endWithPadding + props.keepTraceRange * pageRange
-        ),
+        visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
+        visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
         focusId,
         mergeTmp,
         permanentItemList
@@ -459,7 +468,7 @@ export const setup = (
   }
 
   const _slideTo = (target, animObj, updateParam = { mergeTmp: false }) => {
-    if (slideLock) {
+    if (slideLock || target == visibleInfo.start) {
       return
     };
     taskManager.addTask(TaskType.SLIDE, { target: -target, animObj, updateParam });
@@ -591,6 +600,8 @@ export const setup = (
     if (id == focusId) {
       return;
     }
+    //有外部触发的滚动时, 取消load
+    tryCancelDelayLoad();
     templateItemAdder.tryAddItemById(id);
     let next_focus_item = getItemById(id);
     if (next_focus_item) {
@@ -679,6 +690,8 @@ export const setup = (
   };
 
   const slideTo = (position, doAnim) => {
+    //有外部触发的滚动时, 取消load
+    tryCancelDelayLoad();
     templateItemAdder.tryAddItemByPosition(position);
     if (
       typeof position !== "undefined" &&
@@ -687,10 +700,10 @@ export const setup = (
       let animObj = null;
       if (doAnim) {
         animObj = {
-          easing: props.slideSetting.Easing,
+          easing: innerSlideSetting.Easing,
           onStart: null,
-          speed: props.slideSetting.Speed,
-          duration: props.slideSetting.Duration,
+          speed: innerSlideSetting.Speed,
+          duration: innerSlideSetting.Duration,
         };
       }
       _slideTo(position, animObj);
@@ -720,6 +733,8 @@ export const setup = (
   };
 
   const slideToDiv = (div, doAnim) => {
+    //有外部触发的滚动时, 取消load
+    tryCancelDelayLoad();
     if (div) {
       const item_layout = div.jsvGetRelativePosition(toRaw(locateDiv.value));
       const direction = 1;
@@ -741,8 +756,8 @@ export const setup = (
         _slideTo(cur_slide, doAnim ? {
           easing: "",
           onStart: null,
-          speed: props.slideSetting.Speed,
-          duration: props.slideSetting.Duration,
+          speed: innerSlideSetting.Speed,
+          duration: innerSlideSetting.Duration,
           onEnd: null,
         } : null);
       }
@@ -821,11 +836,8 @@ export const setup = (
     }
     const updater = pageUpdater.update(
       metroTemplate,
-      visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
-      Math.min(
-        visibleInfo.startMax + visibleInfo.range + visibleInfo.padding.end - 1,
-        visibleInfo.endWithPadding + props.keepTraceRange * pageRange
-      ),
+      visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
+      visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
       focusId,
       false,
       permanentItemList
@@ -833,6 +845,8 @@ export const setup = (
     updater.apply();
     onItemFocus(getItemById(focusId), null);
     slideToItem(id2Index(focusId), false);
+    //template和slideDivStyle均确定后再次重设box condition
+    updateTouchBoxCondition();
   };
 
   const getVisibleItems = () => {
@@ -849,6 +863,8 @@ export const setup = (
   };
 
   const moveFocus = (direction) => {
+    //有外部触发的滚动时, 取消load
+    tryCancelDelayLoad();
     if (direction == "left" || direction == 37 || direction == EdgeDirection.left) {
       _moveToNext(-1, 0);
     } else if (direction == "right" || direction == 39 || direction == EdgeDirection.right) {
@@ -886,27 +902,36 @@ export const setup = (
     slideLock = false;
   }
 
+  const setSlideSetting = (setting) => {
+    if (!setting) {
+      innerSlideSetting = props.slideSetting;
+    } else {
+      innerSlideSetting = setting;
+    }
+  }
+
   const exportObject = {
     lockSlide,
     unlockSlide,
     lock,
     unlock,
+    refreshData,
+    moveFocus,
     slideTo,
+    slideToItem,
+    slideToDiv,
     setFocusId,
     setFocusByUid,
-    getFocusBlockRef,
     setEnterFocusId,
     setEnterFocusRect,
-    slideToItem,
-    slideToDiv,
-    refreshData,
+    setZIndex,
+    getFocusBlockRef,
     getVisibleItems,
-    moveFocus,
     getCustomerDataSize,
-    setZIndex,
     getCurrentFocusIndex,
     getCurMode,
     getTemplatePosition,
+    setSlideSetting
   };
 
   const _calculateNearestItemByRect = (visibleSet, enter_rect_info) => {
@@ -1108,6 +1133,7 @@ export const setup = (
     if (onKeyDownLock) {
       return true;
     }
+    tryCancelDelayLoad();
     if (mode.getMode() == TOUCH_MODE) {
       if (mode.duringTouch()) {
         //touch过程中的按键不处理
@@ -1159,6 +1185,8 @@ export const setup = (
       metroTemplate.getTailItemIndex()
     )?.templateInfo;
     if (lastTemplateInfo) {
+      let preTouchW = touchDivSize.width;
+      let preTouchH = touchDivSize.height;
       if (vertical) {
         touchDivSize.width = props.width;
         touchDivSize.height = lastTemplateInfo.top + lastTemplateInfo.height - 1;
@@ -1166,7 +1194,9 @@ export const setup = (
         touchDivSize.width = lastTemplateInfo.left + lastTemplateInfo.width - 1;
         touchDivSize.height = props.height;
       }
-      resetDragRect(touchDivSize.width, touchDivSize.height);
+      if (preTouchW !== touchDivSize.width || preTouchH !== touchDivSize.height) {
+        updateTouchBoxCondition();
+      }
     }
   }
 
@@ -1300,8 +1330,8 @@ export const setup = (
           {
             easing: "",
             onStart: null,
-            speed: props.slideSetting.Speed,
-            duration: props.slideSetting.Duration,
+            speed: innerSlideSetting.Speed,
+            duration: innerSlideSetting.Duration,
           },
           {
             mergeTmp: true
@@ -1401,28 +1431,33 @@ export const setup = (
       onItemBlur(preFocusItem);
       onItemFocus(next_focus_item, preEdgeRect);
 
-      let cur_visible_start = _calculateVisibleStart(next_focus_item.templateInfo, vertical ? vertical_direction : horizontal_direction);
-      if (visibleInfo.start !== cur_visible_start) {
-        if (next_focus_item.itemConfig.itemSlide == METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS) {
+
+      if (next_focus_item.itemConfig.itemSlide == METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS) {
+        let cur_visible_start = _calculateVisibleStart(
+          next_focus_item.templateInfo,
+          vertical ? vertical_direction : horizontal_direction,
+          preFocusItem.templateInfo,
+        );
+        if (visibleInfo.start !== cur_visible_start) {
           let animObj = {
             easing: "",
             onStart: null,
-            speed: props.slideSetting.Speed,
-            duration: props.slideSetting.Duration,
+            speed: innerSlideSetting.Speed,
+            duration: innerSlideSetting.Duration,
           };
           _slideTo(cur_visible_start, animObj, { mergeTmp: false });
-        } else {
-          const updater = pageUpdater.update(
-            metroTemplate,
-            cur_visible_start,
-            cur_visible_start + visibleInfo.range + visibleInfo.padding.end - 1,
-            next_focus_item.id,
-            false,
-            permanentItemList
-          );
-          //不做滚动时,保证获焦的item创建. 为了避免提前隐藏, 使用applyTmp
-          updater.applyTmp();
         }
+      } else {
+        const updater = pageUpdater.update(
+          metroTemplate,
+          visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
+          visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
+          next_focus_item.id,
+          false,
+          permanentItemList
+        );
+        //不做滚动时,保证获焦的item创建. 为了避免提前隐藏, 使用applyTmp
+        updater.applyTmp();
       }
     } else {
       //到达边缘
@@ -1473,48 +1508,58 @@ export const setup = (
   const normalizeVisibleStart = (origin, targetItem = null) => {
     let pos_key = vertical ? "top" : "left";
     let size_key = vertical ? "height" : "width";
-    let visible_start = origin;
-    if ((props.slideSetting.BoundaryProtect & SlideSetting.START_PROTECT) > 0) {
-      let boundary = 0;
-      //首个元素是占位符时, 在保证获焦区域完全展示的前提下要保证首个不可获焦元素的完全展示
-      const headTemplateInfo = getItemByIndex(0).templateInfo;
-      if (
-        targetItem
-        && (!headTemplateInfo.focusable || targetItem.index == headTemplateInfo.index)
-        && targetItem[pos_key] + targetItem[size_key] <=
-        visibleInfo.range
-      ) {
-        boundary = headTemplateInfo[size_key];
+    let visibleStart = origin;
+    if ((innerSlideSetting.BoundaryProtect & SlideSetting.START_PROTECT) > 0) {
+      if (visibleInfo.start >= 0) {
+        let boundary = 0;
+        //首个元素是占位符时, 在保证获焦区域完全展示的前提下要保证首个不可获焦元素的完全展示
+        const headTemplateInfo = getItemByIndex(0).templateInfo;
+        if (
+          targetItem
+          && (!headTemplateInfo.focusable || targetItem.index == headTemplateInfo.index)
+          && targetItem[pos_key] + targetItem[size_key] <=
+          visibleInfo.range
+        ) {
+          boundary = headTemplateInfo[size_key];
+        }
+        visibleStart = visibleStart < boundary ? 0 : visibleStart;
+      } else {
+        // 以最后一个item的位置作为动态的保护边界
+        visibleStart = visibleStart < visibleInfo.start ? visibleInfo.start : visibleStart;
       }
-      visible_start = visible_start < boundary ? 0 : visible_start;
     }
-    if ((props.slideSetting.BoundaryProtect & SlideSetting.END_PROTECT) > 0) {
+    if ((innerSlideSetting.BoundaryProtect & SlideSetting.END_PROTECT) > 0) {
       let lastTemplateInfo = getItemByIndex(metroTemplate.getTailItemIndex()).templateInfo;
-      let last_visible_start =
-        lastTemplateInfo[pos_key] +
-        lastTemplateInfo[size_key] -
-        visibleInfo.range;
-      last_visible_start = last_visible_start < 0 ? 0 : last_visible_start;
-      let boundary = last_visible_start;
-      if (
-        targetItem
-        && (!lastTemplateInfo.focusable || targetItem.index == lastTemplateInfo.index)
-        && targetItem[pos_key] - last_visible_start >= 0
-      ) {
-        //最后元素是占位符, 在保证获焦区域完全展示的前提下要保证不可获焦元素的完全展示
-        boundary = lastTemplateInfo[pos_key] - visibleInfo.range;
+      const lastEnd = lastTemplateInfo[pos_key] + lastTemplateInfo[size_key];
+      const lastVisibleStart = Math.max(lastEnd - visibleInfo.range, 0);
+      //边界必须大于等于0, 同时若最后一个缩进时, 边界采用最后一个item的位置
+      if (visibleInfo.end <= lastEnd) {
+        let boundary = lastVisibleStart;
+        if (
+          targetItem
+          && (!lastTemplateInfo.focusable || targetItem.index == lastTemplateInfo.index)
+          && targetItem[pos_key] - lastVisibleStart >= 0
+        ) {
+          boundary = lastTemplateInfo[pos_key] - visibleInfo.range;
+        }
+        visibleStart = visibleStart > boundary ? lastVisibleStart : visibleStart;
+      } else {
+        // 以最后一个item的位置作为动态的保护边界
+        visibleStart = visibleStart > visibleInfo.start ? visibleInfo.start : visibleStart;
       }
-      visible_start =
-        visible_start > boundary ? last_visible_start : visible_start;
     }
-    return visible_start;
+    return visibleStart;
   }
 
-  const _calculateVisibleStart = (targetTemplateInfo, direction) => {
+  let preTemplateInfo = null;
+  const _calculateVisibleStart = (targetTemplateInfo, direction, preInfo = null) => {
     if (!targetTemplateInfo) {
       console.error("MetroWidget: _calculateVisibleStart target item is null");
       return 0;
     }
+    if (preInfo) {
+      preTemplateInfo = preInfo;
+    }
 
     preSlideDirection = direction;
     preAnchorItemIndex = targetTemplateInfo.index;
@@ -1524,12 +1569,14 @@ export const setup = (
     let new_visible_start = visibleInfo.start;
 
     let needCalculate = true;
-    switch (props.slideSetting.Type) {
+
+    switch (innerSlideSetting.Type) {
       case SlideSetting.Type.FIX_POSITION:
+        //TODO 当item的size和widget的size相同时, 滚动速度会出现未预期的变化
         //FIX_POSITION 模式会将当前 item 的中心固定到指定位置
 
         //首页不滚动
-        if (props.slideSetting.FixFirstPage) {
+        if (innerSlideSetting.FixFirstPage) {
           if (targetTemplateInfo[pos_key] + targetTemplateInfo[size_key] - 1 < visibleInfo.range) {
             new_visible_start = 0;
             needCalculate = false;
@@ -1539,7 +1586,7 @@ export const setup = (
         if (needCalculate) {
           new_visible_start = Math.ceil(
             targetTemplateInfo[center_key] -
-            visibleInfo.range * props.slideSetting.FixPercent
+            visibleInfo.range * innerSlideSetting.FixPercent
           );
         }
         break;
@@ -1557,68 +1604,93 @@ export const setup = (
         break;
       case SlideSetting.Type.SEAMLESS:
         //首页不滚动
-        if (props.slideSetting.FixFirstPage) {
+        if (innerSlideSetting.FixFirstPage) {
           if (targetTemplateInfo[pos_key] + targetTemplateInfo[size_key] - 1 < visibleInfo.range) {
             new_visible_start = 0;
             needCalculate = false;
           }
         }
+
         if (needCalculate) {
-          if (
-            targetTemplateInfo[size_key] >=
-            visibleInfo.range *
-            (props.slideSetting.EndPercent - props.slideSetting.StartPercent)
-          ) {
-            //尺寸较大的item
-            new_visible_start =
-              targetTemplateInfo[center_key] - visibleInfo.range * 0.5;
+          /**
+           * seamless滚动规则:
+           * 0-start: 焦点往右时不处理, 往左的时候更新position以保持焦点的start位置一致
+           * end-1.0: 焦点往左时不处理, 往右的时候更新position以保持焦点的end位置一致
+           * 重合区域: 保持焦点的中心位置一致
+           */
+          const rect0Start = visibleInfo.start;
+          const rect0End = visibleInfo.start + visibleInfo.range * innerSlideSetting.StartPercent;
+          const rect1Start = visibleInfo.start + visibleInfo.range * innerSlideSetting.EndPercent;
+          const rect1End = visibleInfo.end;
+
+          const itemStart = targetTemplateInfo[pos_key];
+          const itemEnd = targetTemplateInfo[pos_key] + targetTemplateInfo[size_key] - 1;
+
+          let targetStart;
+          let targetEnd;
+          if (preTemplateInfo != null) {
+            targetStart = preTemplateInfo[pos_key];
+            targetEnd = preTemplateInfo[pos_key] + preTemplateInfo[size_key] - 1;
           } else {
-            if (direction > 0) {
-              if (
-                targetTemplateInfo[pos_key] + targetTemplateInfo[size_key] >
-                visibleInfo.start +
-                visibleInfo.range * props.slideSetting.EndPercent
-              ) {
-                new_visible_start =
-                  targetTemplateInfo[pos_key] +
-                  targetTemplateInfo[size_key] -
-                  visibleInfo.range * props.slideSetting.EndPercent;
-              }
-            } else if (direction < 0) {
-              if (
-                targetTemplateInfo[pos_key] <
-                visibleInfo.start +
-                visibleInfo.range * props.slideSetting.StartPercent
-              ) {
-                new_visible_start =
-                  targetTemplateInfo[pos_key] -
-                  visibleInfo.range * props.slideSetting.StartPercent;
+            targetStart = rect0End;
+            targetEnd = rect1Start;
+          }
+
+          let rect0Result = undefined;
+          let rect1Result = undefined;
+          if (itemStart < rect0End) {
+            if (targetStart < rect0Start) {
+              rect0Result = itemStart;
+            } else {
+              //inRect0, 只处理往左/往上
+              if (direction <= 0) {
+                let pre;
+                if (targetStart < rect0End) {
+                  pre = targetStart;
+                } else {
+                  pre = rect0End;
+                }
+                rect0Result = visibleInfo.start + (itemStart - pre);
               }
+            }
+          }
+          if (itemEnd > rect1Start) {
+            if (targetEnd > rect1End) {
+              rect1Result = itemEnd - visibleInfo.range;
             } else {
-              //不是沿widget方向的移动
-              if (targetTemplateInfo[pos_key] < visibleInfo.start) {
-                new_visible_start =
-                  targetTemplateInfo[pos_key] -
-                  visibleInfo.range * props.slideSetting.StartPercent;
-              } else if (
-                targetTemplateInfo[pos_key] + targetTemplateInfo[size_key] >
-                visibleInfo.end
-              ) {
-                new_visible_start =
-                  targetTemplateInfo[pos_key] +
-                  targetTemplateInfo[size_key] -
-                  visibleInfo.range * props.slideSetting.EndPercent;
+              //inRect1, 只处理往右/往下
+              let pre;
+              if (targetEnd > rect1Start) {
+                pre = targetEnd;
+              } else {
+                pre = rect1Start;
+              }
+              if (direction >= 0) {
+                rect1Result = visibleInfo.start + (itemEnd - pre);
               }
             }
+          } else {
+            //不移动
+          }
+
+          if (typeof rect0Result !== "undefined" && typeof rect1Result !== "undefined") {
+            //重叠区域
+            new_visible_start = rect0Result;
+          } else if (typeof rect0Result !== "undefined") {
+            new_visible_start = rect0Result;
+          } else if (typeof rect1Result !== "undefined") {
+            new_visible_start = rect1Result;
           }
         }
         break;
       default:
         console.error(
           "MetroWidget: undefined slide type",
-          props.slideSetting.Type
+          innerSlideSetting.Type
         );
     }
+
+    preTemplateInfo = targetTemplateInfo;
     new_visible_start = normalizeVisibleStart(new_visible_start, targetTemplateInfo);
     return Math.round(new_visible_start);
   };
@@ -1731,6 +1803,7 @@ export const setup = (
   const touchLoadItemRect = visibleInfo.range;
   const reachAnchorGroup = 2;
   const wallConditionGroup = 1;
+  const touchCountGroup = 3;
 
   let divPos = -1;
   let frameCount = -1;
@@ -1745,7 +1818,20 @@ export const setup = (
     }
   }
 
-  const mergeTouchSlideToSlideDiv = () => {
+  const getTouchCount = (nexusCustomData) => {
+    let touchCount = -1;
+    if (nexusCustomData) {
+      try {
+        touchCount = JSON.parse(nexusCustomData).tc;
+      } catch (e) {
+        touchCount = -1;
+      }
+    }
+    return touchCount;
+  }
+
+  const mergeTouchSlideToSlideDiv = (touchCount) => {
+    // console.log("testtest", props.name, `touchToDiv div: ${slideDivTop.value}, visibleStart:${visibleInfo.start} swapCount: ${Forge.sFrameCount.count}`)
     if (vertical) {
       slideDivTop.value = -visibleInfo.start;
     } else {
@@ -1760,14 +1846,34 @@ export const setup = (
         .boxPosition(walls.left, walls.top, walls.right, walls.bottom)
         .then([actorController.state().setHitWallOverflow()]), //TODO 通过prop设置哪个方向overflow
       actorController
-        .action()
-        .teleportTo(0, 0)]);
+        .condition(touchCountGroup, false)
+        .touchCount(touchCount)
+        .then([
+          actorController
+            .action()
+            .teleportTo(0, 0)
+        ])
+    ]);
+    //下一帧删除touchCount
+    actorController.run([
+      actorController.condition().onNextTick().then([
+        actorController.state().removeConditionByGroup(touchCountGroup),
+      ])
+    ])
   }
 
-  const onTouchDown = (data) => {
+  const onTouchDown = (data, customData, nexusCustomData) => {
+    touchRecorder.reset();
+    let touchCount = getTouchCount(nexusCustomData);
+    touchRecorder.setTouchCount(touchCount);
+    if (mode.getMode() == FOCUS_MODE) {
+      //模式切换, 更新boxPosition
+      updateTouchBoxCondition();
+    }
     mode.touchStart();
     mode.flingEnd();
-
+    // console.log("touchtest", `${props.name} animId:${debugAnimId} viewId:${debugViewId}`,
+    //  "onTouchDown", data, customData, nexusCustomData)
     const t = 100;
     const offsetThreshold = {
       left: vertical ? undefined : t,
@@ -1775,6 +1881,7 @@ export const setup = (
       top: vertical ? t : undefined,
       bottom: vertical ? t : undefined,
     }
+
     actorController.run([
       actorController
         .condition(undefined, false)
@@ -1789,13 +1896,12 @@ export const setup = (
     //blur item
     onItemBlur(getItemById(focusId));
 
-    // visibleInfo.start = getVisibleStart(data);
     templateItemAdder.tryAddItemByPosition(visibleInfo.end + visibleInfo.range);
 
     const updater = pageUpdater.update(
       metroTemplate,
-      visibleInfo.startWithPadding - visibleInfo.range,
-      visibleInfo.endWithPadding + visibleInfo.range,
+      visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
+      visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
       0,
       false,
       permanentItemList
@@ -1829,46 +1935,58 @@ export const setup = (
       //只点击, 没有移动或者fling
       updateRenderItems(false, false);
       mode.touchEnd();
+    } else {
+      if (touchRecorder.moved && !mode.duringFling()) {
+        mergeTouchSlideToSlideDiv(touchRecorder.touchCount);
+        updateRenderItems(false, false);
+        mode.touchEnd()
+      }
     }
   }
 
-  const onDragStart = (data) => {
+  const exportOnTouchRelease = props.touchFlag > 0 ? onTouchRelease : undefined;
+
+  const onDragStart = (data, customData, nexusCustomData) => {
+    touchRecorder.move();
     mode.dragStart()
     visibleInfo.start = getVisibleStart(data);
   }
 
-  const onDragEnd = (data) => {
+  const onDragEnd = (data, customData, nexusCustomData) => {
     visibleInfo.start = getVisibleStart(data);
     actorController.run([
       actorController.state().removeConditionByGroup(reachAnchorGroup),
     ]);
-    mergeTouchSlideToSlideDiv();
-    updateRenderItems(false, false);
-    mode.touchEnd()
   }
 
-  const onFlingStart = (data) => {
+  const onFlingStart = (data, customData, nexusCustomData) => {
+    touchRecorder.move();
     mode.flingStart();
     visibleInfo.start = getVisibleStart(data);
     updateRenderItems(true, true);
   }
 
-  const onFlingProgress = (data) => {
+  const onFlingProgress = (data, customData, nexusCustomData) => {
     visibleInfo.start = getVisibleStart(data);
     updateRenderItems(true, true);
   }
 
-  const onFlingEnd = (data) => {
+  const onFlingEnd = (data, customData, nexusCustomData) => {
     visibleInfo.start = getVisibleStart(data);
     //记录拖拽的距离
     if (mode.duringFling()) {
-      mergeTouchSlideToSlideDiv();
+      let touchCount = getTouchCount(nexusCustomData);
+      mergeTouchSlideToSlideDiv(touchCount);
       updateRenderItems(false, false);
       mode.flingEnd();
       mode.touchEnd();
     }
   }
 
+  const onFlingDrop = (data, customData, nexusCustomData) => {
+    visibleInfo.start = getVisibleStart(data);
+  }
+
   const getTouchWall = () => {
     const boxSize = metroTemplate.getBoundingBoxSize();
     let wall = {
@@ -1880,9 +1998,15 @@ export const setup = (
     if (vertical) {
       wall.top = -boxSize.height + props.height - slideDivTop.value;
       wall.bottom = -slideDivTop.value;
+      if (wall.top > wall.bottom) {
+        wall.top = wall.bottom;
+      }
     } else {
       wall.left = -boxSize.width + props.width - slideDivLeft.value;
       wall.right = -slideDivLeft.value;
+      if (wall.left > wall.right) {
+        wall.left = wall.right;
+      }
     }
     return wall;
   }
@@ -1891,8 +2015,8 @@ export const setup = (
     templateItemAdder.tryAddItemByPosition(visibleInfo.start + visibleInfo.range);
     const updater = pageUpdater.update(
       metroTemplate,
-      expand ? visibleInfo.start - visibleInfo.range : visibleInfo.startWithPadding,
-      expand ? visibleInfo.start + 2 * visibleInfo.range : visibleInfo.endWithPadding,
+      visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
+      visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
       0,
       true,
       permanentItemList
@@ -1900,9 +2024,10 @@ export const setup = (
     applyTmp ? updater.applyTmp() : updater.apply();
   }
 
-  const resetDragRect = () => {
+  const updateTouchBoxCondition = () => {
     if (actorController != null) {
       const walls = getTouchWall();
+
       //更新wall设置
       actorController.run([
         actorController.state().removeConditionByGroup(wallConditionGroup),
@@ -1914,12 +2039,32 @@ export const setup = (
     }
   }
 
+  const touchRecorder = {
+    moved: false,
+    touchCount: -1,
+    reset: function () {
+      this.moved = false;
+      this.touchCount = -1;
+    },
+    move: function () {
+      this.moved = true;
+    },
+    setTouchCount: function (count) {
+      this.touchCount = count;
+    }
+  };
+
+  //TODO debug
+  // let debugAnimId = -1;
+  // let debugViewId = -1
   const initTouch = () => {
     actorController = new ActorControl();
     const divView = touchDiv.value.jsvGetProxyView();
     actorController.bindForgeView(divView, true);
     divView.DragEnables?.(4 | 0x08 | 0x10); // 只激活drag
-
+    // debugAnimId = actorController.debugGetAnimId();
+    // debugViewId = divView.ViewId;
+    // console.log("testtest", props.name, `animId:${debugAnimId} viewId:${debugViewId}`);
     const walls = getTouchWall();
     //注册回调
     actorController.run([
@@ -1927,10 +2072,10 @@ export const setup = (
         .condition(undefined, true)
         .onTouchDown()
         .then([onTouchDown]),
-      // actorController
-      //   .condition(undefined, true)
-      //   .onDragStart()
-      //   .then([onDragStart]),
+      actorController
+        .condition(undefined, true)
+        .onDragStart()
+        .then([onDragStart]),
       actorController
         .condition(undefined, true)
         .onDragEnd()
@@ -1947,6 +2092,10 @@ export const setup = (
         .condition(undefined, true)
         .onFlingEnd()
         .then([onFlingEnd]),
+      actorController
+        .condition(undefined, true)
+        .onFlingDrop()
+        .then([onFlingDrop]),
       actorController
         .condition(undefined, true)
         .onTouchRelease()
@@ -1960,7 +2109,7 @@ export const setup = (
   }
 
   //init
-  pageUpdater = new PageUpdater(_updatePage);
+  pageUpdater = new PageUpdater(_updatePage, props.name);
   visibleInfo.range = vertical
     ? widgetRectInfo.contentHeight
     : widgetRectInfo.contentWidth;
@@ -1998,13 +2147,14 @@ export const setup = (
     if (item) {
       init_focus_id = props.initFocusId;
       if (item.itemConfig.itemSlide == METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS) {
-        cur_visible_start = _calculateVisibleStart(item.templateInfo, 1);
+        cur_visible_start = _calculateVisibleStart(item.templateInfo, 0);
       }
     }
   }
   focusId = init_focus_id;
   visibleInfo.start = cur_visible_start;
 
+  //保证创建速度, 你描画一屏
   const initUpdater = pageUpdater.update(
     metroTemplate,
     visibleInfo.startWithPadding,
@@ -2014,6 +2164,21 @@ export const setup = (
     permanentItemList
   );
   initUpdater.apply();
+  //延时加载剩余屏
+  const delayLoadHandler = setTimeout(() => {
+    const updateHandler = pageUpdater.update(
+      metroTemplate,
+      visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
+      visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
+      focusId,
+      false,
+      permanentItemList
+    );
+    updateHandler.apply();
+  }, 200);
+  const tryCancelDelayLoad = () => {
+    clearTimeout(delayLoadHandler);
+  }
 
   onMounted(() => {
     _changeFocusId(focusId, false);
@@ -2038,6 +2203,7 @@ export const setup = (
   onUpdated(() => { });
 
   onBeforeUnmount(() => {
+    tryCancelDelayLoad();
     mounted = false;
   });
 
@@ -2051,7 +2217,7 @@ export const setup = (
     exportObject,
     setZIndex,
     onTouchDown,
-    onTouchRelease,
+    onTouchRelease: exportOnTouchRelease,
     currentFocusIndex,
     modeForExport,
   }