vue自定义一个回到顶部组件

1.首先创建一个backTop.vue页面:

页面有两个按钮,一个回到顶部按钮,一个刷新按钮(showRefresh:false将刷新按钮隐藏),实现效果如下:

代码解析:

domName:需要监听滚动的dom类名,不传默认监听body

showRefresh:是否显示刷新按钮

right:组件定位距离右侧像素,默认距离右侧50px

bottom:组件定位距离底部像素,默认距离底部66px

默认监听dom元素滚动50px(scrollTop>50)后显示回到顶部组件,可自由更加情景设置

代码实现:

<template><div><div class="fixed-button" :style="fixedStyle"><div class="refresh-area" @click="refreshData" v-if="showRefresh"><i class="refresh"></i></div><div class="arrow-area" @click="backTop"><i class="arrowUp"></i></div></div></div>
</template><script>
export default {//设置需要监听滚动的div名称,默认'',监听bodyprops: {domName: {type: String,default: '',},showRefresh: {type: Boolean,default: true,},right: {type: Number,default: 50,},bottom: {type: Number,default: 66,},},data() {return {fixedStyle: 'display:none;',dom: null, //被监听的dom}},mounted() {console.log('domName', this.domName)if (this.domName != '') {this.dom = document.querySelector('.' + this.domName)this.dom.addEventListener('scroll', this.scrollToTop)} else {document.body.addEventListener('scroll', this.scrollToTop)}},destroyed() {if (this.domName != '') {this.dom.removeEventListener('scroll', this.scrollToTop)} else {document.body.removeEventListener('scroll', this.scrollToTop)}},methods: {// 为了计算距离顶部的高度,当高度大于60显示回顶部图标,小于60则隐藏scrollToTop() {const that = thislet scrollTop = 0if (this.domName != '') {scrollTop = this.dom.pageYOffset || this.dom.scrollTop} else {scrollTop = window.pageYOffset || document.body.scrollTop}that.scrollTop = scrollTopif (that.scrollTop > 50) {that.fixedStyle = `right:${this.right}px;bottom:${this.bottom}px;`} else {that.fixedStyle = 'display:none;'}this.$emit('scrollToTop')},// 刷新refreshData() {//   this.$refs.child1Container.refreshDataMoren("");this.$emit('refreshData')},// 回到顶部backTop() {const that = thislet timer = setInterval(() => {let ispeed = Math.floor(-that.scrollTop / 5)if (this.domName != '') {this.dom.scrollTop = that.scrollTop + ispeed} else {document.documentElement.scrollTop = document.body.scrollTop =that.scrollTop + ispeed}if (that.scrollTop === 0) {clearInterval(timer)}}, 20)},},
}
</script><style>
.fixed-button {position: fixed;/* width: 40px; */bottom: 66px;right: 50px;z-index: 999999;
}
.refresh-area {color: #20499e;cursor: pointer;width: 34px;height: 34px;line-height: 34px;background: #ffffff;box-shadow: 0px 2px 6px 2px rgba(54, 78, 128, 0.1);border-radius: 50%;font-size: 16px;text-align: center;
}
.arrow-area {color: #20499e;cursor: pointer;width: 34px;height: 34px;line-height: 34px;margin-top: 12px;border-radius: 50%;text-align: center;background: #ffffff;box-shadow: 0px 2px 6px 2px rgba(54, 78, 128, 0.1);color: #20499e;
}
.refresh-area:hover {background: #20499e !important;
}
.arrow-area:hover {background: #20499e !important;
}
.refresh-area:hover .refresh {background: url('../assets/refreshHover.svg') no-repeat center !important;
}
.arrow-area:hover .arrowUp {background: url('../assets/goTopHover.svg') no-repeat center !important;
}
.refresh {display: inline-block;width: 16px;height: 16px;background: url('../assets/refresh.svg') no-repeat center;margin-top: 9px;
}
.arrowUp {display: inline-block;width: 14px;height: 16px;background: url('../assets/goTop.svg') no-repeat center;margin-top: 9px;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/27380.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

搜维尔科技:特斯拉称工厂内有两台人形机器人开始自主工作

搜维尔科技消息&#xff0c;据外电报道&#xff0c;特斯拉声称&#xff0c;其目前拥有两台 Optimus 人形机器人在工厂内自主工作&#xff0c;这尚属首次。 如果目前这场薪酬方案混乱有什么好处的话&#xff0c;那就是特斯拉几乎看起来又有了一个公关部门。 当然&#xff0c;其…

记录open62541简单有效的编译生成.c和.h文件【OPCUA开源库】

一、下载和安装CMake 虽然说可以通过下面命令安装CMake,但是安装CMake时,通常会安装来自你的操作系统的软件仓库中的版本,这个版本可能不是最新的 sudo apt-get install cmake 如果安装后发现CMake版本低于CMake 3.13是没有办法进行编译的 接下来通过编译源码来升级高版本…

基数排序O(n)时间复杂度的实现

基数排序O(n)时间复杂度的实现 前言 之前写过一篇文章六种常见排序算法分析与实现&#xff0c;讲了六种常见的排序算法&#xff0c;但是没有了解到桶排序&#xff0c;基数排序这两种排序算法&#xff0c;今天刷LeetCode发现了这两种算法&#xff0c;本文先来聊聊基数排序的思…

Ubuntu字体相关

Ubuntu字体相关 解决字体相关问题 Windows字体 sudo apt install font-manager sudo apt update && sudo apt install ttf-mscorefonts-installer # 安装字体至系统范围 sudo cp *.ttf /usr/local/share/fonts/ sudo cp *.ttc /usr/local/share/fonts/ # 重建字体缓…

06 SpringBoot 配置文件详解-application.yaml

Spring Boot 提供了大量的自动配置&#xff0c;极大地简化了spring 应用的开发过程&#xff0c;当用户创建了一个 Spring Boot 项目后&#xff0c;即使不进行任何配置&#xff0c;该项目也能顺利的运行起来。当然&#xff0c;用户也可以根据自身的需要使用配置文件修改 Spring …

以太坊网络中为什么要设置Gas上限

以太坊网络中的Gas上限&#xff08;Gas Limit&#xff09;是一个重要的机制&#xff0c;它主要出于以下几个目的&#xff1a; 防止无限循环和拒绝服务攻击&#xff08;DoS&#xff09;&#xff1a; Gas上限防止了智能合约中的无限循环&#xff0c;这可以保护网络免受恶意合约的…

vue3 vant4 仿京东分类功能实现

Ⅰ- 壹 - 功能展示和使用需求 需求描述 基于vant 实现,仿京东分类功能实现样式交互等基本实现,细节可能需要优化 地址 https://gitee.com/wswhq/vue3-vant-temp/tree/master/src/view/ClassIfication 功能展示 Ⅱ - 贰 - 封装思路 不表述了自己看代码吧 Ⅲ - 叁 - 使用 …

TikTok账号被限流的原因及解决方法

TikTok账号被限流无疑是众多内容创作者面临的一大难题。流量骤减&#xff0c;账号活跃度下降&#xff0c;究竟是什么原因导致限流呢&#xff1f;本文将深入分析TikTok限流的几大成因&#xff0c;并提供一些解决方案&#xff0c;特别是推荐海外云手机这一工具&#xff0c;有效避…

c++工程实践——实际工程中的文件读取和日期处理的小问题

一、问题 在实际开发中遇到了两个小问题&#xff0c;一个是文件流的读写中的长度和结尾判断;另外一个是C11库std::chrono::duration的数据类型的问题。这两个问题导致了两个结果&#xff1a; 1、流结尾判断不准确&#xff0c;多读一帧导致长度判断恒为正确&#xff0c;文件不加…

你认为这个项目的难点和亮点是什么?

你认为这个项目的难点和亮点是什么&#xff1f; 好的&#xff0c;面试官&#xff0c;这个项目对于我来说还是有一定的挑战性的&#xff0c;在此过程中&#xff0c;我也成长和学习到了不少。亮点和难点方面我主要从三个方面来阐述&#xff0c;一个是业务方面&#xff0c;一个是整…

若依微服务Docker部署验证码出不来怎么办?

最近,有许多人反馈在使用 Docker 部署若依微服务项目时,遇到验证码无法显示的问题。本文将重点介绍解决该问题的注意事项以及整个项目的部署流程。之前我们也撰写过微服务部署教程,本文将在此基础上进行优化和补充。你也可以参考我之前写的部署教程:https://yang-roc.blog.…

AI来帮助我使用inno项目的配置打包win运行文件。

同时使用了chatgpt和文心一言。实测结果&#xff0c;chatgpt更好些&#xff0c;文心一言也有特点。贴图&#xff1a; ChatGpt: Chatgpt 感觉更了解你要的。 文心一言&#xff0c;要描述更清楚些。&#xff08;测试了几遍&#xff09; 最终我的结构是这样的&#xff1a; 具体怎…

【Java面试】十九、并发篇(下):线程池

文章目录 1、为什么要使用线程池2、线程池的执行原理2.1 七个核心参数2.2 线程池的执行原理 3、线程池用到的常见的阻塞队列有哪些4、如何确定核心线程数开多少个&#xff1f;5、线程池的种类有哪些&#xff1f;6、为什么不建议用Executors封装好的静态方法创建线程池7、线程池…

C++青少年简明教程:C++的指针入门

C青少年简明教程&#xff1a;C的指针入门 说到指针&#xff0c;就不可能脱离开内存。了解C的指针对于初学者来说可能有些复杂&#xff0c;我们可以试着以一种简单、形象且易于理解的方式来解释&#xff1a; 首先&#xff0c;我们可以将计算机内存想象成一个巨大的有许多格子的…

快速开发的UI框架:效率蹭蹭提高!!【送源码】

不知道各位用uniapp 开发移动端小程序或者网页&#xff0c;是否用UI框架。 我一般就用官方自带的&#xff0c;近期一个项目 用了uView, 感觉整体还不错&#xff0c;类似蚂蚁的风格。 特此推荐下&#xff0c;可以收藏一下&#xff0c;需要的时候记得来取哦&#xff01; 介绍 …

Linux 线程控制

&#x1f493;博主CSDN主页:麻辣韭菜&#x1f493;   ⏩专栏分类&#xff1a;Linux初窥门径⏪   &#x1f69a;代码仓库:Linux代码练习&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习更多Linux知识   &#x1f51d; 目录 前言 1.线程现象 2.线程等待 3.线程…

git配置2-不同的代码托管平台配置不同的ssh key

1. 配置单个ssh key 1.1. 原理1.2. 生成 ssh key1.3. 代码托管平台配置公钥 2. 配置多个ssh key 2.1. 应用场景2.2. 生成两个不同的key2.3. 修改config文件2.4. 配置代码托管平台2.5. 测试是否成功 1. 配置单个ssh key 1.1. 原理 使用ssh命令行工具&#xff08;git安装成功…

【APP移动端自动化测试】第四节.元素操作的API

文章目录 前言一、点击&输入&清空操作 1.1 点击元素 1.2 输入&清空元素二、获取文本内容&位置&大小操作 2.1 获取文本内容 2.2 获取位置&大小三、根据属性名获取属性值操作四、滑动和拖拽操作 4.1 _swipe 4.2 _scroll …

博瓦科技产品亮相湖北安博会啦!!!

6月12日&#xff0c;第二十三届2024中国&#xff08;武汉&#xff09;社会公共安全产品暨数字城市产业展览会&#xff08;简称&#xff1a;湖北安博会&#xff09;在武汉国际会展中心隆重开幕。作为行业内最具影响力的展会之一&#xff0c;此次盛会将汇聚来自全球的顶尖企业、专…

Github 2024-06-08 开源项目日报Top10

根据Github Trendings的统计,今日(2024-06-08统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量TypeScript项目4Python项目2Swift项目1Svelte项目1Jupyter Notebook项目1非开发语言项目1Go项目1Vue项目1Lua项目1Visual Studio Code - 开源项…