vue3 无限滚动组件

本来就是酸奶

已于 2022-06-27 08:50:20 修改

阅读量772

点赞数

文章标签： vue.js 前端 typescript

于 2022-06-20 11:30:05 首次发布

本文链接：https://blog.csdn.net/qq_42828972/article/details/125369042

版权

本文详细记录了如何在Vue3中开发一个无限滚动组件，涵盖了从导入所需工具文件到实现滚动监听和数据加载的关键步骤，对于使用Vue.js和TypeScript的前端开发者具有实践指导意义。

摘要由CSDN通过智能技术生成

记录

<script setup lang="ts">
import {
    computed, reactive, ref } from 'vue'
import {
    useAnimationFrame } from '../utils'

const props = withDefaults(
  defineProps<{
     
    /** 每秒多少像素 */
    speed?: number
    /** 浮动时停止滚动 */
    hoverStop?: boolean
    /** 方向 */
    dir?: 'x' | 'y'
  }>(),
  {
   
    speed: 50,
    hoverStop: false,
    dir: 'y',
  }
)

const boxEl = ref<HTMLDivElement>()
const boxSize = reactive({
    w: 0, h: 0 })
useAnimationFrame(() => {
   
  if (!boxEl.value) return
  boxSize.w =