当前位置： 首页 > news >正文

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

news 2026/4/2 2:40:39

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:100%;overflow: hidden;"><!-- 最外层overflow要设置为hidden, 否则会和el-scrollbar冲突, 显示2个滚动条且滚动不舒服--><el-scrollbar class="scrollbar" ref="scrollbar" style="height:100%;"><el-backtop target=".scrollbar .el-scrollbar__wrap" :bottom="100"><!-- 这里设置target除了添加el-scrollbar本体,还要添加.el-scrollbar__wrap, 否则无效 --><divstyle="height: 100%;width: 100%;background-color: var(--el-bg-color-overlay);box-shadow: var(--el-box-shadow-lighter);text-align: center;line-height: 40px;color: #1989fa;">UP</div></el-backtop><h1 align="center">Test Message</h1><el-row><!-- 只是为了给布局添加自适应的边距, 不重要, 读者可不使用 --><el-col :span="1"><div class="grid-content ep-bg-purple"></div></el-col><el-col :span="22"><div class="grid-content ep-bg-purple-light"><el-timeline><el-timeline-itemv-for="(activity, index) in activities"placement="top":key="index":timestamp="activity.timestamp"><el-card><h4>{{ activity.content }}</h4><p>{{ activity.timestamp }}</p></el-card></el-timeline-item></el-timeline></div></el-col><el-col :span="1"><div class="grid-content ep-bg-purple"></div></el-col></el-row></el-scrollbar></div><script>const App = {data() {return {message: "Hello Element Plus",activities: [{content: 'Custom icon',timestamp: '2018-04-12 20:46',},{content: 'Custom color',timestamp: '2018-04-03 20:46',},{content: 'Custom size',timestamp: '2018-04-03 20:46',},{content: 'Custom hollow',timestamp: '2018-04-03 20:46',},{content: 'Default node',timestamp: '2018-04-03 20:46',},{content: 'Custom hollow',timestamp: '2018-04-03 20:46',},{content: 'Default node',timestamp: '2018-04-03 20:46',},{content: 'Custom hollow',timestamp: '2018-04-03 20:46',},{content: 'Default node',timestamp: '2018-04-03 20:46',},]};},methods: {updateData() {var obj = {content: 'aaaaaaaa',timestamp: '2023-04-03 20:46',};this.activities.push(obj);this.activities.push(obj);this.activities.push(obj);this.activities.push(obj);this.activities.push(obj);this.activities.push(obj);},scrollerFunc() {//这里要注意用document.getElementById去获取scrollbar组件读取滚动距离值是错误的,要用this.$refs.scrollbar.$ellet let1 = this.$refs.scrollbar.$el.firstChild.scrollTop; //滚动条滚动距离let let2 = this.$refs.scrollbar.$el.firstChild.scrollHeight; //浏览器总高度let let3 = this.$refs.scrollbar.$el.scrollHeight; //浏览器可见高度console.log(let1, let2, let3);if(let1 + let3 == let2){console.log("页面触底啦")let loadingInstance = this.$loading({target: "#load",text: "加载中"});setTimeout(() => {//你用的时候这里就可以访问后端数据进行更新，我这里直接本地更新数据了this.updateData();loadingInstance.close();}, 1000);}}},mounted() {this.$refs.scrollbar.$el.addEventListener("scroll", this.scrollerFunc, true);  //这里要注意用document.getElementById去获取scrollbar组件绑定滚动事件无效，要使用this.$refs.scrollbar.$el}};const app = Vue.createApp(App);app.use(ElementPlus);app.mount("#app");</script></body>
</html>

为避免篇幅过长，更多细节的处理、集成分页功能等就不在此展示了，完全可自行实现。

相关文章：

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

ElementUI之el-scrollbar el-backtop el-timeline实现时间轴触底刷新和一键返回页面顶部。 背景&#xff1a;ElementUI的版本&#xff08;vue.global.js 3.2.36&#xff0c; index.css 2.4.4&#xff0c; index.full.js 2.4.4&#xff09; 废话不多说&#xff0c;先看动…...

编程日记 2024/1/12 0:39:28

CAS-ABA问题编码实战

多线程情况下演示AtomicStampedReference解决ABA问题 package com.nanjing.gulimall.zhouyimo.test;import java.util.concurrent.TimeUnit; import java.util.concurrent.atomic.AtomicInteger; import java.util.concurrent.atomic.AtomicStampedReference;/*** @author zho…...

编程日记 2024/1/12 0:38:27

Linux 常用进阶指令

我是南城余&#xff01;阿里云开发者平台专家博士证书获得者&#xff01; 欢迎关注我的博客&#xff01;一同成长&#xff01; 一名从事运维开发的worker&#xff0c;记录分享学习。 专注于AI&#xff0c;运维开发&#xff0c;windows Linux 系统领域的分享&#xff01; 其他…...

编程日记 2024/1/12 0:37:26

windows通过ssh连接Liunx服务器并实现上传下载文件

连接ssh 输入&#xff1a;ssh空格用户名ip地址&#xff0c;然后按Enter 有可能出现下图提示&#xff0c;输入yes 回车即可 输入 password &#xff0c;注意密码是不显示的&#xff0c;输入完&#xff0c;再按回车就行了 以上是端口默认22情况下ssh连接&#xff0c;有些公司它…...

编程日记 2024/1/12 0:36:25

【K8S 存储卷】K8S的存储卷+PV/PVC

目录 一、K8S的存储卷 1、概念&#xff1a; 2、挂载的方式&#xff1a; 2.1、emptyDir&#xff1a; 2.2、hostPath&#xff1a; 2.3、NFS共享存储&#xff1a; 二、PV和PVC&#xff1a; 1、概念 2、请求方式 3、静态请求流程图&#xff1a; 4、PV和PVC的生命周期 5、…...

编程日记 2024/1/12 0:34:23

工业智能网关如何保障数据通信安全

工业智能网关是组成工业物联网的重要设备&#xff0c;不仅可以起到数据交换、通信、边缘计算的功能&#xff0c;还可以发挥数据安全保障功能&#xff0c;保障工业物联网稳定、可持续。本篇就为大家简单介绍一下工业智能网关增强和确保数据通信安全的几种措施&#xff1a; 1、软…...

编程日记 2024/1/12 0:26:15

基于Springboot的课程答疑系统（有报告）。Javaee项目，springboot项目。

演示视频&#xff1a; 基于Springboot的课程答疑系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&…...

编程日记 2024/1/12 0:23:11

操作系统 内存相关

0 内存 cpu和内存的关系 内存覆盖 内存的覆盖是一种在程序运行时将部分程序和数据分为固定区和覆盖区的技术。这种技术的主要目的是为了解决程序较大&#xff0c;无法一次性装入内存导致无法运行的问题。 具体来说&#xff0c;内存的覆盖技术将用户空间划分为以下两个部分&…...

编程日记 2024/1/12 0:21:09

【模拟IC学习笔记】 PSS和Pnoise仿真

目录 PSS Engine Beat frequency Number of harmonics Accuracy Defaults Run tranisent?的3种设置 Pnoise type noise Timeaverage sampled(jitter) Edge Crossing Edge Delay Sampled Phase sample Ratio 离散时间网络(开关电容电路)的噪声仿真方法 PSS PSS…...

编程日记 2024/1/12 0:20:07

IPv6邻居发现协议(NDP)---路由发现

IPv6路由发现（前缀公告） 邻居发现 邻居发现协议NDP（Neighbor Discovery Protocol）是IPv6协议体系中一个重要的基础协议。邻居发现协议替代了IPv4的ARP（Address Resolution Protocol）和ICMP路由器发现（Router Discovery），它定义了使用ICMPv6报文实现地址解析，跟踪邻…...

编程日记 2024/1/12 0:17:04

OpenPLC v3 代码结构

OpenPLC v3 是一个基于 C 的开源实时自动化平台&#xff0c;主要用于控制和自动化行业中的设备。该项目具有以下主要模块&#xff1a; 1. Core&#xff1a;核心模块&#xff0c;提供数据结构和算法实现。 2. Master&#xff1a;主设备模块&#xff0c;实现与从设备通信的接口。…...

编程日记 2024/1/12 0:14:01

安全防御之备份恢复技术

随着计算机和网络的不断普及&#xff0c;人们更多的通过网络来传递大量信息。在网络环境下&#xff0c;还有各种各样的病毒感染、系统故障、线路故障等&#xff0c;使得数据信息的安全无法得到保障。由于安全风险的动态性&#xff0c;安全不是绝对的&#xff0c;信息系统不可能…...

编程日记 2024/1/12 0:12:00

条款39：明智而审慎地使用private继承

1.前言 在之前挑款32曾讨论了C如何将public继承视为is-a关系&#xff0c;在那个例子中我们有个继承体系&#xff0c;其中class Student以public形式继承class Person&#xff0c;于是编译器在必要时刻将Student转换为Persons。。现在&#xff0c;我在以原先那个例子&#xff0…...

编程日记 2024/1/12 0:10:59

【数据库原理】（20）查询优化概述

查询优化是关系数据库系统设计和实现中的核心部分&#xff0c;对提高数据库性能、减少资源消耗、提升用户体验有着重要影响。虽然挑战重重&#xff0c;但凭借坚实的理论基础和先进的技术手段&#xff0c;关系数据库在查询优化方面有着广阔的发展空间。 一.查询中遇到的问题 数…...

编程日记 2024/1/12 0:07:56

FineBI实战项目一（18）：每小时上架商品个数分析开发

点击新建组件&#xff0c;创建每小时上架商品个数组件。 选择线图&#xff0c;拖拽cnt&#xff08;总数&#xff09;到纵轴&#xff0c;拖拽hourStr到横轴。 修改横轴和纵轴的文字。 调节连线样式。 添加组件到仪表板。...

编程日记 2024/1/12 0:06:55

Pytorch常用的函数(六)常见的归一化总结(BatchNorm/LayerNorm/InsNorm/GroupNorm)

Pytorch常用的函数(六)常见的归一化总结(BatchNorm/LayerNorm/InsNorm/GroupNorm) 常见的归一化操作有&#xff1a;批量归一化&#xff08;Batch Normalization&#xff09;、层归一化&#xff08;Layer Normalization&#xff09;、实例归一化&#xff08;Instance Normaliza…...

编程日记 2024/1/12 0:05:54

业务记录笔记

一、印尼支付现状 1、银行转账&#xff0c;在app发起转账&#xff0c;生成虚拟账户&#xff0c;在ATM对这个虚拟账户转账就可以&#xff0c;或者线上对这个虚拟账户转账。 2、电子钱包,机构&#xff1a;Gopay、OVO、Dana、LinkAja 3、运营商支付&#xff1a;主要是代付&#x…...

编程日记 2024/1/12 0:03:52

Leetcode16-有多少小于当前数字的数字（1365）

1、题目 给你一个数组 nums&#xff0c;对于其中每个元素 nums[i]&#xff0c;请你统计数组中比它小的所有数字的数目。 换而言之&#xff0c;对于每个 nums[i] 你必须计算出有效的 j 的数量&#xff0c;其中 j 满足 j ! i 且 nums[j] < nums[i] 。 以数组形式返回答案。…...

编程日记 2024/1/12 0:02:51

JavaWeb- Tomcat

一、概念 老规矩&#xff0c;先看维基百科&#xff1a;Apache Tomcat (called "Tomcat" for short) is a free and open-source implementation of the Jakarta Servlet, Jakarta Expression Language, and WebSocket technologies.[2] It provides a "pure Ja…...

编程日记 2024/1/12 0:01:50

Android studio 各本版下载

搜索Android studio下载时发现各种需要付费下载的链接&#xff0c;在此记录一下官方的下载地址。 Android Studio 下载文件归档 | Android 开发者 | Android Developers...

编程日记 2024/1/12 0:00:48

2025最权威的十大AI学术神器推荐榜单

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 于人工智能生成内容也就是AIGC愈发普及的当前情形下&#xff0c;把它的机械痕迹以及同质化特…...

编程新知 2026/4/2 1:38:13

PowerToys Image Resizer：告别繁琐，三秒搞定图片批量处理

PowerToys Image Resizer&#xff1a;告别繁琐&#xff0c;三秒搞定图片批量处理 【免费下载链接】PowerToys Microsoft PowerToys is a collection of utilities that supercharge productivity and customization on Windows 项目地址: https://gitcode.com/GitHub_Trendin…...

编程新知 2026/4/2 1:34:13

Android安全漏洞案例分析：血淋淋的教训

Android安全漏洞案例分析&#xff1a;血淋淋的教训 Android安全漏洞案例分析&#xff1a;血淋淋的教训 案例一&#xff1a;Secret Token泄露导致账户劫持 漏洞危害&#xff1a;攻击者获取用户全部权限 某社交App在客户端硬编码了API密钥&#xff0c;攻击者通过反编译获取密钥…...

编程新知 2026/4/2 0:53:48

智谱CEO张鹏：将推理性能压榨至极限 不为短期盈利，而是为高质量Token消耗指数曲线

雷递网 乐天 3月31日智谱CEO张鹏今日在智谱2025年年报沟通会上表示&#xff0c;智谱曾经历过质疑&#xff0c;经历过挫折&#xff0c;但无数事实反复验证了一个判断——智能上界的提升&#xff0c;是大模型AGI时代唯一的"第一性"。张鹏说&#xff0c;AGI时代的商业价…...

编程新知 2026/4/1 23:54:39

抑制素A抗体如何提升妊娠中期唐氏综合征筛查的效能？

一、为何抑制素A成为妊娠期的重要生物标志物&#xff1f;抑制素A是一种由α和βA亚基通过二硫键连接形成的异源二聚体糖蛋白。在非妊娠期&#xff0c;它主要由卵巢颗粒细胞分泌&#xff0c;作为反馈调节因子&#xff0c;选择性地抑制垂体前叶分泌卵泡刺激素。进入妊娠状态后&am…...

编程新知 2026/4/1 23:44:29

从“动态规划”到“强化学习”：贝尔曼方程的前世今生与核心思想

从“动态规划”到“强化学习”&#xff1a;贝尔曼方程的前世今生与核心思想 1953年&#xff0c;美国数学家理查德贝尔曼在兰德公司研究导弹防御系统时&#xff0c;面对复杂的多阶段决策问题&#xff0c;提出了一个革命性的数学工具——动态规划。这个诞生于冷战背景下的理论&am…...

编程新知 2026/4/1 23:30:18

效率提升：基于快马平台为dc=y103pc=类参数快速打造调试工具

效率提升&#xff1a;基于快马平台为dcy103&pc类参数快速打造调试工具 在日常开发中&#xff0c;我们经常需要处理各种URL参数&#xff0c;尤其是类似"dcy103&pctest"这样的查询字符串。手动解析和修改这些参数不仅效率低下&#xff0c;还容易出错。最近我在…...

编程新知 2026/4/1 23:24:17

基于MATLAB的用于分析弧齿锥齿轮啮合轨迹的程序已调通，可直接运行并输出齿轮啮合轨迹及传递误差

158.基于matlab的用于分析弧齿锥齿轮啮合轨迹的输出齿轮啮合轨迹及传递误差程序已调通&#xff0c;可直接运行 1. 程序概述 本程序包实现了一套完整的弧齿锥齿轮齿面接触分析&#xff08;TCA&#xff09; 系统&#xff0c;主要用于分析大轮凸面与小轮凹面的啮合特性。程序由刘…...

编程新知 2026/4/1 23:16:05

Fiji图像处理软件更新故障排查指南：当科学工具遇到“升级烦恼“

Fiji图像处理软件更新故障排查指南&#xff1a;当科学工具遇到"升级烦恼" 【免费下载链接】fiji A "batteries-included" distribution of ImageJ :battery: 项目地址: https://gitcode.com/gh_mirrors/fi/fiji Fiji作为生物图像分析领域的瑞士军刀…...

编程新知 2026/4/1 22:59:45

补个基础：闭包和this指针调用

//定义了一个普通的函数 const search()>{console.log(search) } //定义了一个防抖函数 function debounce(fn,delay){let timer nullreturn (...args)>{clearTimeout(timer)timersetTimeout(()>{//为什么要apply&#xff0c;改变指针指向fn.apply(this,args)console.…...

编程新知 2026/4/1 22:23:19