vue实现滑动超出指定距离回顶部功能


Posted in Javascript onJuly 31, 2019

本文实例为大家分享了vue实现滑动超出指定距离回顶部功能,供大家参考,具体内容如下

效果图展示:

vue实现滑动超出指定距离回顶部功能

1、当页面滑动时执行scrollToTop ()函数,判断滑动的距离是否超出指定距离,注意下面获取getElementsByClassName时,是你被滑动标签的class。

mounted() {
  window.addEventListener('scroll', this.scrollToTop, true)
 }
scrollToTop () {
  let This = this
  let dom = document.getElementsByClassName('content')[0];//获取滑动模块的信息(注意class别写错)
  This.scrollTop = dom.scrollTop;
  if (This.scrollTop > 200) {
    This.btnFlag = true
  } else {
    This.btnFlag = false
  }
}

2、当超出指定距离会出来向上的小图标,点击执行backTop ()函数回顶部。图标我是用的阿里矢量图标引入到项目中,样式自己调一下。

// 点击图标回到顶部方法,加计时器是为了缓慢回到顶部
backTop () {
  let This = this
  let timer = setInterval(() => {
    let ispeed = Math.floor(-This.scrollTop / 5)
    document.getElementsByClassName('content')[0].scrollTop = This.scrollTop + ispeed
    if (This.scrollTop === 0) {
      clearInterval(timer)
    }
  }, 16)
},

完整代码请看下面:

<template>
 <div class="scrollTop-wrap">
  <div v-if="btnFlag" class="go-top">
    <li class="iconfont iconhuidaodingbu" @click="backTop()"></li>
  </div>
 </div>
</template>
<script>
 import { httpGetMethod } from '../common/httpService'
 export default {
  name: 'scrollTop',
  data: function () {
   return {
    btnFlag:false,
    scrollTop:0//当前滑动距离
   }
  },
  mounted() {
    window.addEventListener('scroll', this.scrollToTop, true)
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop, true)
  },
  methods: {
    // 点击图标回到顶部方法,加计时器是为了缓慢回到顶部
    backTop () {
      let This = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-This.scrollTop / 5)
        document.getElementsByClassName('content')[0].scrollTop = This.scrollTop + ispeed
        if (This.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },
    // 计算距离顶部的高度,当高度大于200显示回顶部图标,小于200则隐藏
    scrollToTop () {
      let This = this
      let dom = document.getElementsByClassName('content')[0];//获取滑动模块的信息(注意class别写错)
      This.scrollTop = dom.scrollTop;
      if (This.scrollTop > 200) {
        This.btnFlag = true
      } else {
        This.btnFlag = false
      }
    }
  }
 }
</script>
<style lang="scss">
 @import '../styles/mixin';
 .scrollTop-wrap {
  position: relative;
  .go-top{
   position: absolute;
   top: 430px;
   left: 260px;
   z-index: 15;
   .iconhuidaodingbu{
     font-size: 30px;
     color: #87878A;
     background-color:#fff;
     border-radius: 50%;
   }
  }
 }
</style>

在其他页面引用一下:

<template>
 <div class="wtll-wrap">
  <div calss="content">
     这里是你的滑动内容
  </div>
  <scrollTop></scrollTop>
 </div>
</template>
<script>
 import scrollTop from '../components/scrollTop'
 export default {
  name: 'wtll',
  data: function () {
   return {
   }
  },
  components: {
   scrollTop
  },
  methods: {
  }
 }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
May 12 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
js实现列表向上无限滚动
Jan 13 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 #Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 #Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 #Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 #Javascript
原生js代码能实现call和bind吗
Jul 31 #Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 #Javascript
javascript中undefined的本质解析
Jul 31 #Javascript
You might like
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
ucenter通信原理分析
2015/01/09 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
javascript中 try catch用法
2015/08/16 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
python抓取京东商城手机列表url实例代码
2013/12/18 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
python写一个md5解密器示例
2018/02/23 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
前台文员我鉴定
2014/01/12 职场文书
司马光教学反思
2014/02/01 职场文书
电教室标语
2014/06/20 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
撤诉书怎么写
2015/05/19 职场文书
初中军训感言
2015/08/01 职场文书
五年级作文之成长
2019/09/16 职场文书