短视频app源码，Vue3滚动加载

Hooks useLazyLoad

interface UseLazyLoadQo<T> {<br>  className: string; // 监听的dom的class<br>  calcBottomCount: number; // 计算滚动到table底部的次数<br>  data: T[]; // 数据<br>  getData: () => void | Promise<void>; // 获取数据的方法<br>}<br>interface UseLazyLoadVo<T> {<br>  updateData?: (nextData: T[]) => void;<br>}<br>export const useLazyLoad = <T>(params: UseLazyLoadQo<T>): UseLazyLoadVo<T> => {<br>  try {<br>    const { className, data, getData, calcBottomCount } = params || {};<br>    let list = data;<br>    let oldScrollTop = 0; // 记录上一次滚动的位置<br>    let listenDom;<br>    onMounted(() => {<br>      listenDom = document.getElementsByClassName(className)[0];<br>      console.log("mounted", listenDom);<br>      listenDom?.addEventListener("scroll", listenScroll);<br>    });<br>    const updateData = (nextData: T[]): void => {<br>      list = nextData;<br>    };<br>    const listenScroll = (e: Event): void => {<br>      if (calcBottomCount === 1 && !list.length) return;<br>      const target = e.target as EventTarget & HTMLDivElement;<br>      // js有精度问题，所以要向上取整<br>      const scrollTop = Math.ceil(target?.scrollTop); // 距顶部距离<br>      const clientHeight = Math.ceil(target?.clientHeight); // 可视区高度<br>      const scrollHeight = Math.ceil(target?.scrollHeight); // 滚动条总高度<br>      // 考虑到滚动的位置一般可能会大于一点可滚动的高度，所以这里不能用等于<br>      // 对比oldScrollTop 与 scrollTop的值，如果相等，说明滚动条没有滚动，直接return<br>      // console.log('scrollTop', scrollTop, 'clientHeight', clientHeight, 'scrollHeight', scrollHeight);<br>      if (oldScrollTop === scrollTop) return;<br>      oldScrollTop = scrollTop;<br>      if (scrollTop && scrollTop + clientHeight >= scrollHeight) {<br>        getData && getData();<br>      }<br>    };<br>    onUnmounted(() => {<br>      removeEventListener("scroll", listenScroll);<br>    });<br>    return {<br>      updateData, // 更新数据<br>    };<br>  } catch (error) {<br>    console.error(error);<br>    return {<br>      updateData: undefined,<br>    };<br>  }<br>}; 

使用:

<br>interface MyState {<br>  appData: any[];<br>}<br>const state = reactive<MyState>({<br>  appData: [],<br>});<br>let calcBottomCount = 1; // 计算滚动到table底部的次数（滚动到底部加 1 如果没有数据 就不赋值）<br>const params = {<br>  className: 'app-wrap_view',<br>  data: state.appData,<br>  getData: getData,<br>  calcBottomCount,<br>};<br>const { updateData } = useLazyLoad<pageListVO>(params);<br>watch(<br>  () => state.appData,<br>  () => {<br>    // 由于 useLazyLoad 无法监听数据变化，所以需在watch中调用函数<br>    updateData && updateData(state.appData);<br>  }<br>);<br>const getData = async (): Promise<void> => {<br>  try {<br>    const params: pageListQO = {<br>      current: calcBottomCount,<br>      productName: '',<br>      size: 20,<br>    };<br>    state.loading = true;<br>    const res = await xxApi(params);<br>    state.loading = false;<br>    <br>    const { code } = res || {};<br>    if (code !== RES_CODE.SUCCESS) return;<br>    const { list } = res.data || {};<br>    if (!list.length && calcBottomCount > 1) {<br>      message.warning('没有更多数据了');<br>      return;<br>    }<br>    calcBottomCount++;<br>    state.appData.push(...(list || []));<br>  } catch (error) {<br>    state.loading = false;<br>    console.error(error);<br>  }<br>};

以上就是短视频app源码，Vue3滚动加载，更多内容欢迎关注之后的文章