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 相关文章推荐
ExtJS 2.0 GridPanel基本表格简明教程
May 25 Javascript
javascript 45种缓动效果 非常酷
Jun 28 Javascript
eclipse导入jquery包后报错的解决方法
Feb 17 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
vue 设置路由的登录权限的方法
Jul 03 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 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
合作指挥官:孟斯克
2020/03/16 星际争霸
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
详解在AngularJS的controller外部直接获取$scope
2017/06/02 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
Python devel安装失败问题解决方案
2020/06/09 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
霸王洗发水广告词
2014/03/14 职场文书
师德承诺书
2015/01/20 职场文书
会议欢迎词
2015/01/23 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript