@shijiu/jsview-vue 2.2.128 → 2.2.201

package/utils/JsViewEngineWidget/MetroWidget/ListWidget.vue

@@ -2,7 +2,7 @@
   只显示单列/行的MetroWidget
 -->
 <script setup>
-import { ref, shallowRef, computed, reactive } from "vue";
+import { ref, shallowRef, computed, reactive, onMounted } from "vue";
 import { setup } from "./MetroWidgetSetup";
 import {
   VERTICAL,
@@ -11,6 +11,7 @@ import {
   SeamlessSlide,
   RENDER_ITEM_BREAK_KEY,
 } from "../WidgetCommon";
+import { ForgeConst } from "../../JsViewVueTools/ForgeConstDefine.ts";
 
 const props = defineProps({
   padding: {
@@ -200,10 +201,20 @@ const {
   touchDivSize,
   "list"
 );
-let touchDivVOn = {};
-if (onTouchRelease) {
-  touchDivVOn["jsv-touchend"] = onTouchRelease;
-}
+
+onMounted(() => {
+  if (onTouchRelease) {
+    touchDiv.value.jsvSetTapListener(
+      {
+        onTouchEnd: onTouchRelease,
+      },
+      ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT |
+        ForgeConst.DragFlags.TOUCH_RECV_FLING_BIT |
+        ForgeConst.DragFlags.TOUCH_RECV_LAST_END
+    );
+  }
+});
+
 defineExpose(exportObject);
 </script>
 
@@ -238,7 +249,6 @@ defineExpose(exportObject);
             width: touchDivSize.width,
             height: touchDivSize.height,
           }"
-          v-on="touchDivVOn"
         >
           <div>
             <slot name="background"></slot>
@@ -256,7 +266,13 @@ defineExpose(exportObject);
             >
               <div
                 v-for="(item, index) in renderData"
-                :key="pageUpdateToken + '_' + item.index"
+                :key="
+                  pageUpdateToken +
+                  '_' +
+                  item.index +
+                  '-' +
+                  item.renderKey.value
+                "
                 :ref="item.divRef"
                 data-jsv-vw-test-rect="1"
                 :style="{
@@ -287,9 +303,10 @@ defineExpose(exportObject);
                 </div>
                 <div
                   v-if="
-                    enableItemRenderBreak &&
-                    placeHolderSetting &&
-                    !item.mounted.value
+                    enableItemRenderBreak 
+                    && placeHolderSetting 
+                    && !item.mounted.value
+                    && item.itemConfig.showSkeleton
                   "
                   :style="{
                     width: item.renderStyle.width - normalizedPlaceHolder.gap,

package/utils/JsViewEngineWidget/MetroWidget/MetroWidget.vue

@@ -82,6 +82,7 @@
                                           uid {string}: item的uid, 可以通过uid来设置焦点
                                           permanent {boolean}: 出去与是否保留
                                           enableTap {boolean}: 是否接受触控tap
+                                          showSkeleton {boolean}: 打断描画时, 是否显示骨架图
                                         }
  *
  *      onFocus {function} 控件获取焦点的回调
@@ -156,7 +157,21 @@
                                             lockChildSlideEvent: {boolean} 设置焦点时忽略子发过来的滚动事件
                                           }
         refreshData
-          @description 刷新数据, 只有存在provideData时才会生效. refresh时对比的array里的object, 所以可以建一个新的array, 只要保证数据成员还是之前的那个object就行
+          @description  刷新数据, 只有存在provideData时才会生效
+                        当refresh时，根据下面的数据对比规则找出变化的数据
+                        refresh时的对比逻辑:
+                          1. 对比array里的object是否是同一个对象
+                          2. 对比array里的jsvKey字段, 若一致则认为该数据未改变，即使object不相同
+                        发现array中存在数据变化时，会如下的场景进行处理
+                          场景1: array内部的数据变化了，无论末尾有没有增加: 变化的项目会重新触发measure, 
+                                若measure返回尺寸变化则调用所有项目measure重做布局  
+                                若measure返回尺寸未变化，则仅对变化项目的div进行key的调整来触发item的remount
+                          场景2: array内部未变化，仅array末尾新增内容: 对末尾内容的项目做measure，布局进行追加处理，原布局内容保持(节省性能)
+                        特别说明: jsvKey的使用方法提示
+                          1. 用lastModify设置jsvKey，并将所有的item设置成同一个jsvKey，后续局部更新项目的jsvKey代表的lastModify
+                          2. 后台运营对于素材是只新增不改动的策略时，用素材的id来命名jsvKey，array中间位置素材变化的时候，
+                             更换jsvKey，以达到局部更新的目的，防止全体更新，从而提高响应的性能
+                        
           @params {boolean} forceUpdate 是否强制刷新
         getVisibleItems
           @description 获取可视item的列表信息
@@ -265,6 +280,8 @@ import {
   SeamlessSlide,
   RENDER_ITEM_BREAK_KEY,
 } from "../WidgetCommon";
+import { ForgeConst } from "../../JsViewVueTools/ForgeConstDefine.ts";
+
 const props = defineProps({
   padding: {
     type: Object,
@@ -454,10 +471,19 @@ const {
   touchDivSize,
   "common"
 );
-let touchDivVOn = {};
-if (onTouchRelease) {
-  touchDivVOn["jsv-touchend"] = onTouchRelease;
-}
+
+onMounted(() => {
+  if (onTouchRelease) {
+    touchDiv.value.jsvSetTapListener(
+      {
+        onTouchEnd: onTouchRelease,
+      },
+      ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT |
+        ForgeConst.DragFlags.TOUCH_RECV_FLING_BIT |
+        ForgeConst.DragFlags.TOUCH_RECV_LAST_END
+    );
+  }
+});
 
 defineExpose(exportObject);
 </script>
@@ -493,7 +519,6 @@ defineExpose(exportObject);
             width: touchDivSize.width,
             height: touchDivSize.height,
           }"
-          v-on="touchDivVOn"
         >
           <div>
             <slot name="background"></slot>
@@ -511,7 +536,13 @@ defineExpose(exportObject);
             >
               <div
                 v-for="(item, index) in renderData"
-                :key="pageUpdateToken + '_' + item.index"
+                :key="
+                  pageUpdateToken +
+                  '_' +
+                  item.index +
+                  '-' +
+                  item.renderKey.value
+                "
                 :ref="item.divRef"
                 data-jsv-vw-test-rect="1"
                 :style="{
@@ -544,9 +575,10 @@ defineExpose(exportObject);
                 </div>
                 <div
                   v-if="
-                    enableItemRenderBreak &&
-                    placeHolderSetting &&
-                    !item.mounted.value
+                    enableItemRenderBreak 
+                    && placeHolderSetting 
+                    && !item.mounted.value
+                    && item.itemConfig.showSkeleton
                   "
                   :style="{
                     width: item.renderStyle.width - normalizedPlaceHolder.gap,