vue實現滑動超出指定距離回頂部功能

2019-11-19 11:05:46

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。