JZTXT

Vue3中点击按钮滚动页面到低端

发布时间 2023-04-13 14:36:37作者: Felix_Openmind

核心代码

<template>
  <div ref="editflagNode"></div>
  <div v-if="route.query.flag === '1' || route.query.flag === '3'">
      <Title v-if="btnFlag || taskDetail.taskConclusion !== null">{{
        route.query.flag === "3" ? "研判结论" : "添加研判结论"
        }}</Title>

      <div style="margin: 10px">
        <div style="margin: 10px">{{ taskDetail.taskConclusion }}</div>
        <div style="width: 100%; display: flex">
          <div
              class="onupload"
              v-for="val in taskDetail.conclusionAttachment"
              :key="val.id"
          >
            <div>{{ val.name }}</div>
            <div>
              <a :href="val.address" :download="val.name">下载</a>
              <!-- 输入框 -->
            </div>
          </div>
          <Textareas @datalist="datalist" empty="1" v-if="btnFlag"
          >提交
          </Textareas
          >
        </div>
      </div>
    </div>
  </div>
</template>

const editflagNode = ref(null);
const containerNode = ref(null);
// 模拟滚动
const scrollToEditflag = (domNode, height) => {
  for (let i = 0; i < height + 1000; i++) {
    setTimeout(() => {
      domNode.value.scrollTo(0, i);
    }, 100);
  }
};

onMounted(async () => {
  console.log("123", 123);
  mitt.on("triggerScrollToEditflag", (flag) => {
    scrollToEditflag(containerNode, editflagNode.value.offsetTop);
    btnFlag.value = flag;
  });
  getResearchTaskDetail();
});