@shijiu/jsview-vue-samples 2.2.35 → 2.2.128

package/LongTextLatex/App.vue

@@ -0,0 +1,93 @@
+<!--
+ * 【界面概述】
+ * 协议书的示例
+ *
+ * 【技巧说明】
+ * Q: 如何长文字div的高度自适应？
+ * A: 描画长文字的div的高度不设置即可
+ *    并通过element.clientHeight获取渲染后的自动高度，以决定滚动轴的总高度
+ *
+ * Q: 长段文字如何换行？
+ * A: 若文字内容中需要折行，则需要把要显示内容放入字符串中，并加入'\n'来达到换行效果，例如：
+ *          <div>{"第一行
+ *          第二行"}</div>
+ *          =======需要改成=======
+ *          <div>{"第一行\n\
+ *          第二行"}</div>
+ *
+ * Q: 文字首行缩进如何做？
+ * A: 目前系统只支持通过空格进行首行缩进，行首加入期望的空格数量即可达到缩进，因为盒子字体库和PC不尽相同，
+ *    所以务必在盒子上实际测试缩进效果。
+ -->
+
+<script setup>
+import LongTextScroll from "./LongTextScroll.vue";
+import Button from "./Button.vue";
+import { jJsvRuntimeBridge } from "jsview";
+import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+  }
+  return true;
+};
+
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div>
+      <div
+        :style="{
+          textAlign: 'center',
+          fontSize: 30,
+          lineHeight: 50,
+          color: '#ffffff',
+          left: 140,
+          top: 20,
+          width: 1000,
+          height: 50,
+          backgroundColor: 'rgba(27,38,151,0.8)',
+        }"
+      >
+        可展示篇幅超过一屏的文字
+      </div>
+      <div :style="{ left: 140, top: 100 }">
+        <LongTextScroll
+          :style="{ width: 1000, height: 500, backgroundColor: '#EEEEEE' }"
+          :textStyle="{ color: '#000000', fontSize: 20 }"
+          :scrollBlockStyle="{
+            width: 10,
+            height: 30,
+            backgroundColor: '#555555',
+          }"
+          :scrollStyle="{
+            left: 1005,
+            width: 10,
+            height: 500,
+            backgroundColor: '#DDDDDD',
+          }"
+          :step="20"
+        >
+        </LongTextScroll>
+        <div :style="{ left: 400, top: 550 }">
+          <Button />
+        </div>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+

package/LongTextLatex/Button.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { HORIZONTAL, MetroWidget, EdgeDirection, useFocusHub } from "jsview";
+import ButtonItem from "./ButtonItem.vue";
+
+const focusHub = useFocusHub();
+const data = [
+  {
+    width: 100,
+    height: 50,
+    marginRight: 100,
+    content: "同意",
+  },
+  {
+    width: 100,
+    height: 50,
+    content: "取消",
+  },
+];
+
+const measures = (item) => {
+  return item;
+};
+
+const onEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.top) {
+    focusHub.setFocus("longTextScroll");
+  }
+};
+</script>
+
+<template>
+  <metro-widget
+    name="button"
+    :width="500"
+    :height="50"
+    :data="data"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :onEdge="onEdge"
+  >
+    <template #renderItem="{ data, query, onEdge, onAction }">
+      <button-item
+        :data="data"
+        :query="query"
+        :onEdge="onEdge"
+        :onAction="onAction"
+      />
+    </template>
+  </metro-widget>
+</template>

package/LongTextLatex/ButtonItem.vue

@@ -0,0 +1,44 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-08 15:05:00
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-08 17:45:44
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onEdge: Function,
+  onAction: Object,
+});
+const focused = ref(false);
+const onFocus = () => {
+  focused.value = true;
+};
+
+const onBlur = () => {
+  focused.value = false;
+};
+
+const onClick = () => {};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: props.data.width,
+      height: props.data.height,
+      fontSize: 30,
+      backgroundColor: focused ? '#DD8800' : '#BBBBAA',
+    }"
+  >
+    {{ data.content }}
+  </div>
+</template>

package/LongTextLatex/LongTextScroll.vue

@@ -0,0 +1,189 @@
+<script setup>
+import Scroll from "./Scroll.vue";
+import { ref, onMounted } from "vue";
+import { useFocusHub, JsvFlexDiv, JsvTextBox } from "jsview";
+
+const props = defineProps({
+  step: Number,
+  style: Object,
+  scrollStyle: Object,
+  scrollBlockStyle: Object,
+  textStyle: Object,
+});
+
+const focusHub = useFocusHub();
+
+const rootRef = ref(null);
+const scrollY = ref(0);
+const textY = ref(0);
+
+let textTotalHeight = 0;
+const onTextSizeReady = (width, height) => {
+  textTotalHeight = height;
+  console.log(`textSize ready width=${width} height=${height}`);
+};
+
+const onAction = {
+  onKeyDown: (ev) => {
+    const valid = textTotalHeight > 0;
+    // let keyUsed = true;
+    if (valid) {
+      let text_y;
+      switch (ev.keyCode) {
+        case 38:
+          if (textY.value !== 0) {
+            text_y =
+              textY.value + props.step >= 0 ? 0 : textY.value + props.step;
+            (textY.value = text_y),
+              (scrollY.value =
+                (-text_y / (textTotalHeight - props.style.height)) *
+                (props.scrollStyle.height - props.scrollBlockStyle.height));
+          }
+          break;
+        case 40:
+          if (textY.value !== props.style.height - textTotalHeight) {
+            text_y =
+              textY.value - props.step <= props.style.height - textTotalHeight
+                ? props.style.height - textTotalHeight
+                : textY.value - props.step;
+            (textY.value = text_y),
+              (scrollY.value =
+                (-text_y / (textTotalHeight - props.style.height)) *
+                (props.scrollStyle.height - props.scrollBlockStyle.height));
+          } else {
+            focusHub.setFocus("button");
+          }
+          break;
+      }
+    }
+  },
+  onFocus: () => {
+    console.log("LongTextScroll getFocus");
+  },
+  onBlur: () => {
+    console.log("LongTextScroll loseFocus");
+  },
+};
+
+onMounted(() => {
+  rootRef.value.requestFocus();
+});
+</script>
+
+<template>
+  <jsv-focus-block ref="rootRef" name="longTextScroll" :onAction="onAction">
+    <div :style="{ overflow: 'hidden', ...style }">
+      <jsv-flex-div
+        :style="{ top: textY, width: style.width }"
+        :onSized="onTextSizeReady"
+      >
+        <jsv-text-box :enableLatex="true" :style="{ width: style.width, ...textStyle, }">
+          {{
+            "疾风引擎JsView用户服务协议及隐私权保护政策\n\
+\n\
+\n\
+特别提示：\n\
+\n\
+欢迎您使用“疾风引擎JsView”。本用户服务协议及隐私权保护政策（下称“本协议”）是您与运营方之间订立的具有法律效力的合同。请您仔细阅读并充分理解本协议各条款内容，特别是涉及免除或者限制责任的条款、权利许可和信息使用的条款、同意开通和使用特殊单项服务的条款、法律适用和争议解决条款等。其中，免除或者限制责任条款等重要内容可能以下划线/加粗进行提示您，您应重点阅读。未成年人用户请在法定监护人陪同下仔细阅读并充分理解本协议，并征得法定监护人的同意后使用“疾风引擎JsView”。\n\
+\n\
+\n\
+除非您完全接受本协议的全部内容，否则您无权\\textcolor{#FF0000}{下载}、注册、登录、使用（以下统称“使用”）“疾风引擎JsView”，或者通过任何方式使用“疾风引擎JsView”服务，或者获得“疾风引擎JsView”提供的任何服务（本协议中统称“使用”）。若您使用“疾风引擎JsView”及相关服务，则视为您已充分理解本协议并承诺作为本协议的一方当事人接受协议的约束，您不得以未仔细阅读、未充分理解等理由拒绝接受本协议的约束。\n\
+\n\
+\\textb{本协议内容或不能保证完全符合未来业务发展需求}。为此，您同意运营方保留随时修改本协议的权利。本协议条款修改后，运营方将及时公布，您同意予以密切关注。如果您继续使用疾风引擎JsView，即视为您完全接受修改后的协议。如果您不接受修改后的协议，请立即停止使用疾风引擎JsView。\n\
+\n\
+关于疾风引擎JsView的使用\n\
+您使用“疾风引擎JsView”及相关服务，登录后，\\textcolor{#00FF00}{系统将为您自动匹配一个不可更改的用户ID},您应妥善保管该用户ID并对以您用户ID所进行的所有活动负法律责任。\n\
+您可根据需要自行使用“疾风引擎JsView”及相关服务或更新“疾风引擎JsView”版本，如您不再需要使用“疾风引擎JsView”及相关服务可自行卸载或者删除。\n\
+为更好的提升用户体验及服务，运营方将不定期提供软件、更新或改变（包括但不限于软件及修改、升级、功能强化、开发新服务、软件及替换等）。您有权选择更新版本或服务，您理解，如果您不及时更新“疾风引擎JsView”及相关服务，部分功能将受到限制或不能继续使用。您在使用疾风引擎JsView时，不得实施以下行为：\n\
+违反国家法律法规规定的；\n\
+危害国家、公共安全、重大公共利益，损害国家荣誉和利益的；\n\
+煽动民族仇恨、民族歧视，破坏民族团结的；扰乱公共秩序、破坏社会稳定、违反公序良俗的；\n\
+传播封建迷信、淫秽、色情、赌博、暴力、恐怖或者教唆犯罪；通过各种渠道盗取、窃取其他用户信息；\n\
+散布病毒、垃圾广告、诈骗信息或存在欺诈、虚假、误导性信息；侵犯运营方、其他公民、其他用户及任何第三方依法享有的知识产权及其他合法权益；\n\
+破坏、篡改、删除、影响疾风引擎JsView构成或内部数据影响正常运行的；\n\
+对疾风引擎JsView进行反向工程、反向汇编、反向编译或者采取其他方式获取本软件源代码；\n\
+扫描、测试、探测疾风引擎JsView缺陷以及BUG漏洞；\n\
+通过第三方软件、插件来使用疾风引擎JsView，或制造、编写、传播该等软件、插件；其他违背社会公共利益或公共道德或依据相关本协议条款规定不适合在疾风引擎JsView实施的；\n\
+及其他可能侵害运营方合法权益的行为。\n\
+\n\
+\n\
+关于疾风引擎JsView的“ID”您在“疾风引擎JsView”的用户ID仅限于您本人使用，未经运营方书面同意，您不得将用户ID以任何形式赠与、借用、出租、转让、售卖或以其他方式许可他人使用，若您违反前述约定，您应自行承担一切不利法律后果。如果运营方发现或者有合理理由认为使用者并非ID初始使用人，为保障用户ID安全，运营商有权立即暂停、警告、删除或屏蔽特定内容、暂时冻结或永久终止该ID的登录等。\n\
+因其他人恶意攻击或您自身原因或其他不可抗因素而导致的ID被盗、丢失，均由您本人承担责任，运营方不承担任何责任。\n\
+您有责任维护个人账号的安全性与保密性，并对您以您用户ID名义所从事的活动承担全部法律责任，包括但不限于您在“疾风引擎JsView”上进行的任何数据修改、款项支付等操作行为。\n\
+\n\
+\n\
+关于疾风引擎JsView的管理\n\
+为提升用户使用体验并规范疾风引擎JsView管理，运营方有权制定、修改、废止相关的疾风引擎JsView用户制度、规则、办法等规范性文件（下称“疾风引擎JsView制度”），并及时予以公布。您在此同意，除遵守本协议约定以外，您还应遵守前述所及疾风引擎JsView制度。如您对疾风引擎JsView制度有任何意见、建议，欢迎您联系客服反馈。\n\
+您理解、确认并同意，运营方有权依合理判断对违反有关法律法规、社会道德、公序良俗或本协议规定的行为采取管理措施，包括但不限于【向用户发出提醒、警告、删除或屏蔽特定内容、暂时冻结或永久终止用户ID的登录等】。同时，为维护自身及其他用户合法权益，运营方将不排除向有关行政主管部门报告或采取进一步的法律行动。\n\
+您理解、确认并同意，如因您使用疾风引擎JsView过程中的行为导致任何第三方、运营方或其关联方遭受任何损害或遭受任何来自第三方的纠纷、诉讼、索赔等，您应当向第三方、运营方或其关联方赔偿相应的损失，并对您违反法律法规或本协议所产生的一切后果负全部法律责任。\n\
+您理解、确认并同意，在法律许可的最大范围内，运营方对于任何运营方控制之外的原因（如地震、火灾、水灾、突发停电、政府命令、ISP中断、软件或硬件故障、计算机病毒或黑客攻击、系统不稳定等）所造成的任何直接的、间接的、附带性的、特殊的、惩罚性的或后果性的损失（包括但不仅限于数据损失、名誉损失、误工损失、电脑故障、用户数据的丢失或其他任何形式的损失），不承担任何责任。因上述不可控因素影响导致疾风引擎JsView无法正常运行的，运营方尽力在合理时限内进行修复。\n\
+由于运营方设备硬件储存数据的局限性，您理解、确认并同意，运营方有权对疾风引擎JsView相应数据设置保存期限。对于超出保存期限的数据，可能会被后台系统自动删除且无法复原，您不得以数据删除为由向运营方提出权利主张。对于用户提出的数据恢复请求，运营方将结合技术可行性予以尽量协助，但不作担保。\n\
+\n\
+\n\
+法律声明\n\
+除法律明确规定外，运营方在此不作任何明示或默示地担保，包括但不限于对任何使用条件、不中断的使用、不侵权的担保，您在此同意自行承担因使用疾风引擎JsView所产生的全部风险。\n\
+您理解、确认并同意，除有特别声明外，运营方在提供疾风引擎JsView服务中所涉及（包括但不限于网页、文字、图片、音频、视频、图表）的知识产权均归运营方所有；运营方提供本服务时所依托软件的著作权、专利权及其他知识产权均归运营方所有；运营方在本服务中使用的图形、文字或其组合以及其他运营方标志及产品、服务名称（“运营方标识”），其著作权、商标权及其他可能涉及的知识产权权利和权益均归运营方所有。未经运营方书面同意，您不得将运营方标识以任何方式使用、许可他人使用或作其他处理，也不得向他人表明您有权使用、许可他人使用或作其他有权处理运营方标识的行为。\n\
+为优化用户的使用体验，运营方可能会向您推送广告，广告内容可能呈现一定程度的营销目的，运营方不对广告内容的真实性进行担保，您应审慎判断并对与该广告相关的交易负责。您与该等广告商、广告主的交易所遭受的纠纷，运营方可尽可能协助调处纠纷，但不承担任何责任。\n\
+您理解、确认并同意，基于市场发展、用户反馈意见及建议以及技术优化等因素，运营方保留单方面对疾风引擎JsView服务的全部或部分服务内容变更、临时暂停、终止的权利，运营方将尽可能及时通知您。服务的临时暂停或终止都将可能导致数据信息的丢失、删除，您同意不以数据丢失、删除为由向运营方提出权利主张。\n\
+基于疾风引擎JsView的服务性质，您理解、确认并同意，在不违反法律法规的情况下，运营方不对任何直接性、间接性、后果性、惩罚性、偶然性、特殊性或刑罚性的损害，包括因用户使用疾风引擎JsView应用程序或本服务而遭受的经济损失承担责任（即使运营方已被告知该等损失的可能性亦然）。尽管本协议中可能含有相悖的规定，运营方对用户承担的全部责任，无论因何原因或何种行为方式，始终不超过用户因使用运营方提供的服务而支付给运营方的费用(如有)。\n\
+\n\
+\n\
+隐私权保护政策\n\
+我们非常重视用户个人信息的保护，且我们与用户一同致力于用户个人信息的保护。本协议所指用户个人信息，是指用户在使用疾风引擎JsView过程中提交的、形成的独立的或与其他信息相结合后能对用户身份进行识别的信息，包括姓名、昵称、头像、电话、住址或位置信息等。\n\
+在您使用疾风引擎JsView的过程中，我们将可能以如下方式收集您在使用服务时主动提供或因为使用服务而产生的个人信息：\n\
+当您使用“疾风引擎JsView”及相关服务时，您可能需要提供您的个人信息（包括但不限于您的姓名、电话号码、地理位置信息、设备信息、您登录疾风引擎JsView时的微信昵称、微信头像等），提供这些信息是为了帮助您建立疾风引擎JsView用户ID。您还可以根据自身需求选择编辑/修改个人资料，如头像、个人主页背景图、昵称、出生日期、性别、个性签名、兴趣标签等信息。您理解并同意，运营方有权在遵守法律法规及本协议的前提下，收集、使用（含商业合作使用）、储存和分享您的个人信息，同时，我们将依法保护您浏览、修改、删除相关信息及撤回同意的权利。\n\
+我们需要结合您的操作行为并通过算法分析，向您进行个性化推荐、展示或推送您可能感兴趣的特定信息。有的信息可能不是您喜欢的信息。\n\
+请您了解，我们收集、使用上述信息时进行了去标识化处理，数据分析仅对应特定的、无法直接关联用户身份的编码，无法也绝不会与您的真实身份相关联。\n\
+为保障您正常使用我们的服务，我们会收集您的【设备型号、操作系统版本号、国际移动设备识别码（IMEI）、网络设备硬件地址（MAC）、登陆IP地址、疾风引擎JsView软件版本号、接入网络的方式和类型、设备加速器（如重力感应设备）、操作日志等日志信息】。\n\
+上述所及信息的收集均为运营方提供疾风引擎JsView完整服务所必需的，部分信息您可以在疾风引擎JsView相应的页面进行删除、修改。对于无法由用户自行删除的信息，您在同意停止使用疾风引擎JsView服务的前提下，可以向运营方提出删除请求，运营方将根据后台系统的技术可行性尽量配合。\n\
+如未来为业务发展需要从第三方间接获取您的个人信息，我们会在获取信息前向您明示您个人信息的来源、类型及使用范围。如疾风引擎JsView开展业务需进行的个人信息处理活动超出您原本向第三方提供个人信息时的授权范围，我们将在处理您的该等个人信息前，征得您的明示同意。\n\
+除下述情形外，我们不会主动向任何第三方共享、披露您的个人信息：\n\
+与国家安全、国防安全有关的；\n\
+与公共安全、公共卫生、重大公共利益有关的；\n\
+与犯罪侦查、起诉、审判和判决执行等有关的；\n\
+出于维护个人信息主体或其他个人的生命、财产等重大合法权益但又很难得到您本人同意的；\n\
+所收集的个人信息是您自行向社会公众公开的；\n\
+从合法公开披露的信息中收集个人信息的，如合法的新闻报道、政府信息公开等渠道；\n\
+根据您的要求签订合同所必需的；\n\
+用于维护所提供的产品或服务的安全稳定运行所必需的，例如发现、处置产品或服务的故障；\n\
+为合法的新闻报道所必需的；涉及运营方及其关联方合并、收购、重组的；\n\
+为改善疾风引擎JsView服务所必需的或符合本协议第四条第2点情形；\n\
+学术研究机构基于公共利益开展统计或学术研究所必要，且对外提供学术研究或描述的结果时，对结果中所包含的个人信息进行去标识化处理的；\n\
+及事先获得您的明确授权同意的；\n\
+法律法规规定的情形。\n\
+运营方将根据微信程序可行性并结合技术可行性，采取合理、有效、可行的措施保护用户个人信息的数据安全。运营方也将合理完善内部管理制度，为用户个人信息提供全方位的保障。\n\
+运营方重视对未成年人个人隐私信息的保护，运营方将依赖您提供的个人信息判断用户是否成年。未成年人使用疾风引擎JsView应事先取得其监护人的同意，否则将由监护人承担全部法律责任。\n\
+\n\
+违约处理\n\
+针对您违反本协议或相关法律法规的行为，运营方有权独立判断并视情况采取预先警示、拒绝发布、立即停止传输信息、删除评论、音频、视频等内容、短期禁止发言、限制账号部分或全部功能直至永久关闭账号等措施。运营方有权公告处理结果，且有权根据实际情况决定是否恢复使用。对涉嫌违反法律法规、涉嫌违法犯罪的行为将保存有关记录，并依法向有关主管部门报告、配合有关主管部门调查。对已删除内容运营方有权不予返还。\n\
+若您违反本协议或相关法律法规规定，引起第三方投诉或诉讼索赔的，您应当自行承担全部法律责任。因您的违法或违约行为导致运营方及其关联公司、控制公司、继承公司向任何第三方赔偿或遭受国家机关处罚的，您还应足额赔偿运营方及其关联公司、控制公司、继承公司因此遭受的损失。\n\
+若您在使用“疾风引擎JsView”及相关服务时上传的文字、视频、音频等侵犯了第三方知识产权、名誉权、姓名权、隐私权等权利及合法权益，运营方有权在收到权利方或者相关方通知的情况下删除该涉嫌侵权内容。针对第三方提出的全部权利主张，您应自行承担全部法律责任；如因您的侵权行为导致运营方及其关联公司、控制公司、继承公司遭受损失的，您还应足额赔偿运营方及其关联公司、控制公司、继承公司遭受的全部损失。\n\
+\n\
+\n\
+免责声明\n\
+您理解并同意，“疾风引擎JsView”及相关服务可能会受多种因素的影响或干扰，运营方不保证（包括但不限于）：\n\
+“疾风引擎JsView”完全适合用户的使用要求；\n\
+运营方不受干扰，及时、安全或不出现错误；\n\
+用户经由运营方取得的任何、服务或其他材料符合用户的期望；\n\
+任何错误都将能得到更正。\n\
+对于涉嫌借款或其他涉及财产的网络信息、账户密码、广告或推广等信息的，用户请谨慎对待并自行判断，基于前述原因您因此遭受的利润、商业信誉、资料损失或其他有形或无形损失的，我们不承担任何直接、间接、附带、特别、衍生性或惩罚性的赔偿责任。\n\
+用户理解并同意，在使用“疾风引擎JsView”及相关服务过程中，可能遇到不可抗力等因素，包括但不限于政府行为、自然灾害、网络原因、黑客攻击、战争或任何其他不能预见、不能克服并不能避免的客观事件。出现不可抗力情况时，运营方将努力在第一时间及时处理，但因不可抗力给用户造成了损失，用户同意运营方不承担责任。\n\
+运营方依本协议约定获得处理违法违规内容的权利不构成运营方的义务或承诺，运营方不能保证及时发现违法行为或进行相应处理。\n\
+\n\
+\n\
+其他\n\
+您在此同意，当运营方需要就某事项通知您时，在内发布公告、向用户单独发出通知、根据用户填报的联系方式等多种渠道均为有效通讯渠道。\n\
+本协议条款的效力和解释均适用中华人民共和国的法律，如有条款与中华人民共和国法律相抵触，则该部分条款应按法律规定重新解释，部分条款的无效或重新解释不影响其他条款的法律效力。\n\
+本协议以及疾风引擎JsView制度将统一构成您与运营方之间的完整协议，两者约定不一致的，以文本制定时间较晚者为准。\n\
+本协议签订地为中华人民共和国上海市，若您在使用疾风引擎JsView过程中产生任何纠纷或争议，您同意将该纠纷或者争议提交本协议签订地人民法院管辖。本协议条款无论何种原因部分无效或不可执行，其他条款仍应继续有效，对双方具有约束力。"
+          }}
+        </jsv-text-box>
+      </jsv-flex-div>
+    </div>
+    <Scroll
+      :top="scrollY"
+      :scrollStyle="scrollStyle"
+      :scrollBlockStyle="scrollBlockStyle"
+    />
+  </jsv-focus-block>
+</template>

package/LongTextLatex/Scroll.vue

@@ -0,0 +1,14 @@
+<script setup>
+defineProps({
+  scrollStyle: Object,
+  top: Number,
+  scrollBlockStyle: Object,
+});
+</script>
+<template>
+  <div :style="{ ...scrollStyle }">
+    <div :style="{ top: top }">
+      <div :style="{ ...scrollBlockStyle }"></div>
+    </div>
+  </div>
+</template>

package/MetroWidgetDemos/MassiveItems/App.vue

@@ -0,0 +1,87 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 13:31:36
+ * @Description: file content
+-->
+<script setup>
+import {
+  MetroWidget,
+  VERTICAL,
+  useFocusHub,
+  METRO_WIDGET_CONST,
+  FixPositionSlide,
+} from "jsview";
+import WidgetItem from "./WidgetItem.vue";
+import { onMounted } from "vue";
+
+const focusHub = useFocusHub();
+
+const provideData = () => {
+  const data = [];
+  for (let i = 0; i < 10; i++) {
+    data.push({
+      width: 900,
+      height: 650,
+      name: "widget_" + i,
+      marginBottom: 10,
+      index: i,
+    });
+  }
+  return data;
+};
+
+const s = new FixPositionSlide();
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: item.marginRight,
+    marginBottom: item.marginBottom,
+    /**重要代码: itemSlide设置为ACT_FOCUS_RECT_EVENT, 由子MetroWidget控制滚动 */
+    // itemSlide: METRO_WIDGET_CONST.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT,
+  };
+};
+
+onMounted(() => {
+  focusHub.setFocus("mwWidget");
+});
+</script>
+
+<template>
+  <div :style="{ width: 1280, height: 720, backgroundColor: '#007788' }" />
+  <!-- 为了保证边缘的item缩放后依旧完整显示, 需要设置padding, 注意width/height是包含padding的 -->
+
+  <div
+    :style="{
+      textAlign: 'center',
+      fontSize: 30,
+      lineHeight: 50,
+      color: '#ffffff',
+      left: 60,
+      top: 5,
+      width: 1160,
+      height: 50,
+      backgroundColor: 'rgba(27,38,151,0.8)',
+    }"
+  >
+    测试MetroWidget可视区域内项目过多时防卡顿时，盒子上的分段显示(上下翻一屏)
+  </div>
+
+  <metro-widget
+    name="mwWidget"
+    :top="62"
+    :left="200"
+    :width="1000"
+    :height="650"
+    :provideData="provideData"
+    :padding="{ left: 30, right: 30 }"
+    :direction="VERTICAL"
+    :measures="measures"
+    :slideSetting="s"
+  >
+    <!-- 重要代码: 为了实现焦点就近移动, 需要传递onItemEdge回调 -->
+    <template #renderItem="{ data, onAction, onItemEdge }">
+      <widget-item :data="data" :onAction="onAction" :onItemEdge="onItemEdge" />
+    </template>
+  </metro-widget>
+</template>