请选择 进入手机版 | 继续访问电脑版
猿人社区
查看: 70|回复: 0

[干货] Vue实现返回顶部 添加onscroll监听

[复制链接]

90

主题

90

帖子

453

积分

管理员

Rank: 9Rank: 9Rank: 9

注册时间
2018-7-24
最后登录
2019-1-18
在线时间
71 小时
威望
18
金钱
315
贡献
12
发表于 2018-12-13 10:42:03 | 显示全部楼层 |阅读模式


在写右侧快捷菜单的时候加上了返回顶部模块
可是遇到了一个问题 加上window.onscroll 监听的时候this指向的是window
我是通过 data的一个布尔值数据来让返回顶部DOM显示还是隐藏的
所以用在window.scroll 下用this.isTop是不行的
不过最后解决方案是用 箭头函数 懵逼了很久


DOM 代码
v-show 是决定返回顶部这个DOM是否显示还是隐藏的 添加click动作 点击后返回到顶部
  1. <transition name="go_top_animation">
  2. <div class="go_top box" v-show="isTop" @click="go_top">返回顶部</div>
  3. </transition>
复制代码


VUE
  1. const right_fast_sus_module={
  2.     template,
  3.     data(){
  4.         return {
  5.             isTop:false //默认隐藏
  6.         }
  7.     },
  8.     methods:{
  9.         go_top(){
  10.             window.scrollTo(0,0); //返回顶部
  11.             this.isTop=false;  //点击后隐藏DOM
  12.         },
  13.         scroll(){
  14.             if(window.scrollY>window.innerHeight){
  15.                 this.isTop=true;  //如果滚动的距离大过屏幕的高度就显示
  16.             }else{
  17.                 this.isTop=false; //否侧隐藏
  18.             }
  19.         }
  20.     },
  21.     mounted(){
  22.         // mounted 是vue挂载的时候运行的函数
  23.         window.addEventListener("scroll",()=>{
  24.             this.scroll(); //添加window的scroll方法 里面执行的是 scroll()方法
  25.         })
  26.     }
  27. }
复制代码



css
html { scroll-behavior:smooth; } 是添加返回顶部的缓动

  1. html { scroll-behavior:smooth; }
  2.     #right_fast_sus_module .go_top { margin-top:10px; }
  3.     #right_fast_sus_module .go_top svg { width:1.2em; height:1.2em; }
  4.     .go_top_animation-enter { opacity:0; transform:translateY(40px); }
  5.     .go_top_animation-enter-active { transition:all 0.5s linear; }
  6.     .go_top_animation-enter-to { opacity:1; }
  7.     .go_top_animation-leave { opacity:1; }
  8.     .go_top_animation-leave-active { transition:all 0.2s linear; }
  9.     .go_top_animation-leave-to { opacity:0; }
复制代码




本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?入住社区

x
您需要登录后才可以回帖 登录 | 入住社区

本版积分规则

Archiver|手机版|小黑屋|Deaf community ( 粤ICP备17070410号 )

GMT+8, 2019-1-21 17:12 , Processed in 2.280620 second(s), 19 queries .

Powered by Discuz! X3.4© 2001-2017 Comsenz Inc. Template design by Penday

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