耀极客论坛

 找回密码
 立即注册
查看: 2974|回复: 0

vue通过v-show实现回到顶部top效果

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-9 02:14:39 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了vue通过v-show实现回到顶部top效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  
  1. html
复制代码
  1.     ‹div class="totop" v-show="toTopShow" @click="toTop()">top‹/div>
复制代码
  1. css
复制代码
  1. .totop {
  2.   width: 50px;
  3.   height: 50px;
  4.   line-height: 50px;
  5.   border-radius: 25px;
  6.   background-color: white;
  7.   position: fixed;
  8.   bottom: 75px;
  9.   right: 10px;
  10.   text-align: center;
  11. }
复制代码
  1. data
复制代码
  1. data() {
  2.     return {
  3.   toTopShow: false,
  4.       srcoll: 0,
  5. }
  6. },
复制代码
  1. 监听事件
复制代码
  1.   watch: {
  2.     srcoll() {
  3.       if (this.srcoll > 400) {
  4.         this.toTopShow = true;
  5.       } else {
  6.         this.toTopShow = false;
  7.       }
  8.     },
  9.   },
复制代码
  1. 加载事件
复制代码
  1. mounted() {
  2.     window.addEventListener("scroll", this.srcollShow);
  3.   },
复制代码
  1. methods:
复制代码
  1. methods: {
  2.     srcollShow() {
  3.       this.srcoll =
  4.         window.pageYOffset ||
  5.         document.documentElement.scrollTop ||
  6.         document.body.scrollTop;
  7.     },
  8. toTop() {
  9.       this.toTopSpeed = setInterval(() => {
  10.         document.documentElement.scrollTop =
  11.           document.documentElement.scrollTop - 20;
  12. //通过改变数字实现动画延迟滚动
  13.         if (this.srcoll ‹ 10) {
  14.           clearInterval(this.toTopSpeed);
  15.         }
  16.       }, 1);
  17.     },
  18. }
复制代码
  以上操作实现通过监听滚动条>400后,top按钮出现,并且点击top按钮,慢慢回到顶部,低于400隐藏,img以此类推
  到此这篇关于vue通过v-show实现回到顶部top效果的文章就介绍到这了,更多相关vue回到顶部top效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 02:49 , Processed in 0.071069 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表