vue3 ts app端实现点击箭头页面向下滚动

您可以使用Vue3的@vue/composition-api来实现这个功能。您需要在组件中引入ref，然后使用onMounted钩子来添加一个监听器，当箭头被点击时触发滚动事件。下面是一个示例代码：

<template>
  <div class="scroll-container">
    <div class="scroll-content" ref="scrollContent">
      <!-- 内容 -->
    </div>
    <div class="scroll-arrow" @click="scrollDown">
      <i class="arrow-down"></i>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from '@vue/composition-api';

export default defineComponent({
  setup() {
    const scrollContent = ref(null);

    const scrollDown = () => {
      const contentElement = scrollContent.value;
      if (contentElement) {
        contentElement.scrollBy({
          top: contentElement.offsetHeight,
          behavior: 'smooth'
        });
      }
    };

    onMounted(() => {
      // 初始化滚动内容
    });

    return {
      scrollContent,
      scrollDown
    };
  }
});
</script>

在这个示例代码中，我们在组件的setup函数中定义了一个scrollContent的ref，它引用了内容的容器元素。我们还定义了一个scrollDown函数，这个函数会在箭头被点击时触发。它会通过scrollBy方法来滚动内容，让其向下滚动一个整个内容区域的高度。最后，我们使用onMounted钩子来初始化滚动内容，以确保组件加载时滚动区域的高度正确。