Web前端篇——ElementUI之el-scrollbar + el-backtop + el-timeline实现时间轴触底刷新和一键返回页面顶部

易Yi

已于 2024-07-24 16:31:36 修改

阅读量2.6k

点赞数 29

分类专栏： Web前端篇文章标签：前端 elementui javascript

于 2024-01-04 12:25:58 首次发布

本文链接：https://blog.youkuaiyun.com/u011391361/article/details/135383265

版权

本文介绍了如何在ElementUI框架中使用el-scrollbar和el-backtop组件实现时间轴的触底刷新效果，并配合el-timeline实现自动回到页面顶部的功能，同时展示了相关的Vue和ElementPlus的使用方法。

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

ElementUI之el-scrollbar + el-backtop + el-timeline实现时间轴触底刷新和一键返回页面顶部。

背景：ElementUI的版本（vue.global.js = 3.2.36， index.css = 2.4.4， index.full.js = 2.4.4）

废话不多说，先看动图效果↓↓↓

然后直接上代码。（注意代码中有注释的地方，是容易出错的关键地方。）

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <!-- viewport设置, 简单页面兼容手机端显示 -->
    <script src="https://unpkg.com/vue@3.2.36/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus@2.4.4/dist/index.css">
    <script src="https://unpkg.com/element-plus@2.4.4/dist/index.full.js"></script>
    <title>Test Web Page</title>
    <style>
      .el-timeline {
        padding-left: 0;
      }
    </style>
  </head>
  <body>
    <div id="app" class="allpack" style="height: