Web前端篇——ElementUI之el-scrollbar + el-backtop + el-timeline实现时间轴触底刷新和一键返回页面顶部
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实现时间轴触底刷新和一键返回页面顶部。 背景：ElementUI的版本（vue.global.js 3.2.36， index.css 2.4.4， index.full.js 2.4.4） 废话不多说，先看动…...
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…...
Linux 常用进阶指令
我是南城余！阿里云开发者平台专家博士证书获得者！ 欢迎关注我的博客！一同成长！ 一名从事运维开发的worker，记录分享学习。 专注于AI，运维开发，windows Linux 系统领域的分享！ 其他…...
windows通过ssh连接Liunx服务器并实现上传下载文件
连接ssh 输入：ssh空格用户名ip地址，然后按Enter 有可能出现下图提示，输入yes 回车即可 输入 password ，注意密码是不显示的，输入完，再按回车就行了 以上是端口默认22情况下ssh连接，有些公司它…...
【K8S 存储卷】K8S的存储卷+PV/PVC
目录 一、K8S的存储卷 1、概念： 2、挂载的方式： 2.1、emptyDir： 2.2、hostPath： 2.3、NFS共享存储： 二、PV和PVC： 1、概念 2、请求方式 3、静态请求流程图： 4、PV和PVC的生命周期 5、…...
工业智能网关如何保障数据通信安全
工业智能网关是组成工业物联网的重要设备，不仅可以起到数据交换、通信、边缘计算的功能，还可以发挥数据安全保障功能，保障工业物联网稳定、可持续。本篇就为大家简单介绍一下工业智能网关增强和确保数据通信安全的几种措施： 1、软…...
基于Springboot的课程答疑系统（有报告）。Javaee项目，springboot项目。
演示视频： 基于Springboot的课程答疑系统（有报告）。Javaee项目，springboot项目。 项目介绍： 采用M（model）V（view）C（controller）三层体系结构&…...
操作系统 内存相关
0 内存 cpu和内存的关系 内存覆盖 内存的覆盖是一种在程序运行时将部分程序和数据分为固定区和覆盖区的技术。这种技术的主要目的是为了解决程序较大，无法一次性装入内存导致无法运行的问题。 具体来说，内存的覆盖技术将用户空间划分为以下两个部分&…...
【模拟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…...
IPv6邻居发现协议(NDP)---路由发现
IPv6路由发现（前缀公告） 邻居发现 邻居发现协议NDP（Neighbor Discovery Protocol）是IPv6协议体系中一个重要的基础协议。邻居发现协议替代了IPv4的ARP（Address Resolution Protocol）和ICMP路由器发现（Router Discovery），它定义了使用ICMPv6报文实现地址解析，跟踪邻…...
OpenPLC v3 代码结构
OpenPLC v3 是一个基于 C 的开源实时自动化平台，主要用于控制和自动化行业中的设备。该项目具有以下主要模块： 1. Core：核心模块，提供数据结构和算法实现。 2. Master：主设备模块，实现与从设备通信的接口。…...
安全防御之备份恢复技术
随着计算机和网络的不断普及，人们更多的通过网络来传递大量信息。在网络环境下，还有各种各样的病毒感染、系统故障、线路故障等，使得数据信息的安全无法得到保障。由于安全风险的动态性，安全不是绝对的，信息系统不可能…...
条款39：明智而审慎地使用private继承
1.前言 在之前挑款32曾讨论了C如何将public继承视为is-a关系，在那个例子中我们有个继承体系，其中class Student以public形式继承class Person，于是编译器在必要时刻将Student转换为Persons。。现在，我在以原先那个例子࿰…...
【数据库原理】（20）查询优化概述
查询优化是关系数据库系统设计和实现中的核心部分，对提高数据库性能、减少资源消耗、提升用户体验有着重要影响。虽然挑战重重，但凭借坚实的理论基础和先进的技术手段，关系数据库在查询优化方面有着广阔的发展空间。 一.查询中遇到的问题 数…...
FineBI实战项目一（18）：每小时上架商品个数分析开发
点击新建组件，创建每小时上架商品个数组件。 选择线图，拖拽cnt（总数）到纵轴，拖拽hourStr到横轴。 修改横轴和纵轴的文字。 调节连线样式。 添加组件到仪表板。...
Pytorch常用的函数(六)常见的归一化总结(BatchNorm/LayerNorm/InsNorm/GroupNorm)
Pytorch常用的函数(六)常见的归一化总结(BatchNorm/LayerNorm/InsNorm/GroupNorm) 常见的归一化操作有：批量归一化（Batch Normalization）、层归一化（Layer Normalization）、实例归一化（Instance Normaliza…...
业务记录笔记
一、印尼支付现状 1、银行转账，在app发起转账，生成虚拟账户，在ATM对这个虚拟账户转账就可以，或者线上对这个虚拟账户转账。 2、电子钱包,机构：Gopay、OVO、Dana、LinkAja 3、运营商支付：主要是代付&#x…...
Leetcode16-有多少小于当前数字的数字（1365）
1、题目 给你一个数组 nums，对于其中每个元素 nums[i]，请你统计数组中比它小的所有数字的数目。 换而言之，对于每个 nums[i] 你必须计算出有效的 j 的数量，其中 j 满足 j ! i 且 nums[j] < nums[i] 。 以数组形式返回答案。…...
JavaWeb- Tomcat
一、概念 老规矩，先看维基百科：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…...
Android studio 各本版下载
搜索Android studio下载时发现各种需要付费下载的链接，在此记录一下官方的下载地址。 Android Studio 下载文件归档 | Android 开发者 | Android Developers...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
【入坑系列】TiDB 强制索引在不同库下不生效问题
文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法：netstat [选项] 功能：查看网络状态 常用选项： n 拒绝显示别名&#…...
数据链路层的主要功能是什么
数据链路层（OSI模型第2层）的核心功能是在相邻网络节点（如交换机、主机）间提供可靠的数据帧传输服务，主要职责包括： 🔑 核心功能详解： 帧封装与解封装 封装： 将网络层下发…...
论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一） 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
多种风格导航菜单 HTML 实现（附源码）
下面我将为您展示 6 种不同风格的导航菜单实现，每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
以光量子为例，详解量子获取方式
光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学（silicon photonics）的光波导（optical waveguide）芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中，光既是波又是粒子。光子本…...
HashMap中的put方法执行流程（流程图）
1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中，其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下： 初始判断与哈希计算： 首先，putVal 方法会检查当前的 table（也就…...
Go 并发编程基础：通道（Channel）的使用
在 Go 中，Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式，用于在多个 Goroutine 之间传递数据，从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...
Java求职者面试指南：计算机基础与源码原理深度解析
Java求职者面试指南：计算机基础与源码原理深度解析 第一轮提问：基础概念问题 1. 请解释什么是进程和线程的区别？ 面试官：进程是程序的一次执行过程，是系统进行资源分配和调度的基本单位；而线程是进程中的…...