前端页面滚动底部触发业务

原创

已于 2022-08-17 11:41:52 修改 · 635 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #typescript

于 2022-08-16 22:00:38 首次发布

本文介绍了在Vue 3.2.37和NaiveUI 2.32.1环境下，利用TypeScript 4.7.4实现前端页面滚动到底部时加载更多内容的示例和理解。通过组件回调函数和触底判断，结合tailwindcss 3.1.8样式，实现了优雅的滚动加载效果。

通过触发底部加载更多内容

参考环境

Vue 3.2.37
NaiveUI 2.32.1
TypeScript 4.7.4
tailwindcss 3.1.8

Demo

<template>
    <n-layout :has-sider="true" position="absolute" class=" h-auto">
        <n-layout-sider :native-scrollbar="false" bordered show-trigger collapse-mode="width" :collapsed-width="16"
            :width="240" style="padding-left: .75rem;pad