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

UnforgetMemory

已于 2022-08-17 11:41:52 修改

阅读量601

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue TypeScript NavieUI 文章标签：前端 vue.js typescript

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

本文链接：https://blog.youkuaiyun.com/UnforgetMemory/article/details/126375232

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

参考环境

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