Vue 实现一个滚动到顶部的悬浮图标组件


Vue 实现一个滚动到顶部的悬浮图标组件

场景

吾辈在写 vuejs 前端项目的时候,需要实现一个下拉文章列表时,出现一个悬浮按钮,用于一键回到文章顶部。

实现

实现源码放到了 GitHubDemo 演示 想直接看源码/效果的人可以直接去看,但最好看一下 注意点

思路

  1. 定义一个 vuejs 组件,抽取出最需要的几个属性(位置,组件的样子)
  2. 监听窗口滚动,当滚动到第二屏的时候显示组件
  3. 监听组件点击,点击即逐渐减少与顶端的距离
  4. 当在滚动中用户手动下拉时终止滚动
  5. 引用组件并传递一个 vue 模板

代码

定义模板 VxScrollToTop

/**
一个 Vue 的滚动到顶部的容器组件(不提供 UI 显示)
使用:
1. 引入自定义文件上传组件: import VxScrollToTop from '@/components/common/VxScrollToTop'
2. 声明它
export default {
  components: {
    VxScrollToTop: VxScrollToTop
  }
}
3. 在 template 中使用

  
  
    vertical_align_top
  

 */


使用起来就很简单了



目前这里只能供了最简单的功能,如果有特别的需求可以在上面继续修改一下就好啦

注意点

  • 组件方法内部必须使用 箭头函数,因为使用 function 会导致 this 发生变化。详情参考 MDN
  • 必须要手动置空 timer,例如上文所用的 this.timer = clearInterval(this.timer),关于为什么 timer 没有被 clearInterval 清空目前吾辈还真不太清楚,但如果把 timer 放到组件外部就正常使用,估计是 vuejs 的属性有什么特殊的地方也说不定!

文章作者: rxliuli
版权声明: 本博客所有文章除特別声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 rxliuli !
 上一篇
使用 vue-cli 创建模板项目 使用 vue-cli 创建模板项目
使用 vue-cli 创建模板项目场景吾辈曾经只是个 Java 后端开发人员,原本对前端的了解大致只有 HTML/CSS/JavaScript/JQuery 级别,后来接触到了 nodejs。不仅是工作之需,吾辈个人而言也非常想要了解现代前
2018-11-08 rxliuli
下一篇 
Windows 为当前用户添加开机自启项 Windows 为当前用户添加开机自启项
Windows 为当前用户添加开机自启项场景不知道你是否遇到过,每次打开电脑,开机之后总是要启动 Chrome 浏览器等一些常用应用,而常用应用中有的有开机自启的选项,有些则没有。每次打开都是重复性的操作,真是不厌其烦。。。 解决方案下面是
2018-11-02 rxliuli
  目录