我的環境是vue+vant+ts, 相信大家應該知道怎么改成vue+js的寫法

先看效果圖：

HTML:

<template><!-- 返回頂部組件 2020-02-17 Walker --><div class="backtop"><div v-if="btnFlag" @click="backTop" class="my_gotop"><!-- 圖標 svg --><svgt="1581926628181"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="4136"width="50"height="50"><pathd="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0zM697.6 582.4 627.2 582.4c-12.8 0-19.2 6.4-19.2 19.2l0 108.8c0 6.4-6.4 12.8-12.8 12.8L428.8 723.2c-6.4 0-12.8-6.4-12.8-12.8L416 595.2c0-6.4-6.4-19.2-19.2-19.2L326.4 576C320 582.4 320 576 320 576l179.2-172.8c6.4-6.4 12.8-6.4 19.2 0L704 576C704 576 704 582.4 697.6 582.4zM704 364.8 320 364.8c-19.2 0-32-12.8-32-32S300.8 300.8 320 300.8l384 0c19.2 0 32 12.8 32 32S723.2 364.8 704 364.8z"p-id="4137"fill="#2375ff"></path></svg></div></div> </template>

TS:

<script lang="ts"> import { Component, Vue } from "vue-property-decorator";@Component export default class EMBackTop extends Vue {//是否顯示組件btnFlag = false;/*** @description 返回頂部的函數*/backTop() {const scrollTopObj =document.documentElement.scrollTop || document.body.scrollTop;if (scrollTopObj > 0) {//回調 backtop()函數 直到不符合條件window.requestAnimationFrame(this.backTop);// 滾動動畫效果 動畫沒執行完之前繼續滑動屏幕會有點bugwindow.scrollTo(0, scrollTopObj - scrollTopObj / 8);// 沒有動畫效果方式 這種方式可以不調用requestAnimationFrame();//window.scrollTo(0, 0);}}/*** @description 是否顯示組件的函數*/showBackTop() {const scrollTopObj =document.documentElement.scrollTop || document.body.scrollTop;if (scrollTopObj > 0) {this.btnFlag = true;} else {this.btnFlag = false;}}mounted() {// 監聽距頂部的距離 調用showBackTop()window.addEventListener("scroll", this.showBackTop, true);}destroyed() {window.removeEventListener("scroll", this.showBackTop, true);} } </script>

Css:

<style scoped lang="less"> .my_gotop {position: fixed;bottom: 2rem;right: 2rem; } </style>

ps:解釋一下 window.requestAnimationFrame(callback) 方法
查了很多，很多讓人費解的解釋，看的我一頭霧水，越看越糊涂。
官方是這樣解釋的：

window.requestAnimationFrame() 告訴瀏覽器——你希望執行一個動畫，并且要求瀏覽器在下次重繪之前調用指定的回調函數更新動畫。該方法需要傳入一個回調函數作為參數，該回調函數會在瀏覽器下一次重繪之前執行；

注意：若你想在瀏覽器下次重繪之前繼續更新下一幀動畫，那么回調函數自身必須再次調用window.requestAnimationFrame()；
當你準備更新動畫時你應該調用此方法。這將使瀏覽器在下一次重繪之前調用你傳入給該方法的動畫函數(即你的回調函數)。回調函數執行次數通常是每秒60次，但在大多數遵循W3C建議的瀏覽器中，回調函數執行次數通常與瀏覽器屏幕刷新次數相匹配。為了提高性能和電池壽命，因此在大多數瀏覽器里，當requestAnimationFrame() 運行在后臺標簽頁或者隱藏的 里時，requestAnimationFrame() 會被暫停調用以提升性能和電池壽命；
回調函數會被傳入DOMHighResTimeStamp參數，DOMHighResTimeStamp指示當前被 requestAnimationFrame() 排序的回調函數被觸發的時間。在同一個幀中的多個回調函數，它們每一個都會接受到一個相同的時間戳，即使在計算上一個回調函數的工作負載期間已經消耗了一些時間。該時間戳是一個十進制數，單位毫秒，最小精度為1ms(1000μs)。

自我感覺：window.requestAnimationFrame(callback)，對回調函數的執行時機的一個優化。在需要對動畫循環調用時，可以替代定時器，解決定時器會卡頓的問題。

更多看這篇博客：requestAnimationFrame

總結

以上是生活随笔為你收集整理的vue 封装返回顶部组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。