vue3一键回到顶部方法

引入组件文件

写一个文件放在components里面
在需要时进行调用它但是呢 vue3当中怎么拿到呢 请往下看 ==============

content

这个文件是放在component的文件

!<template><div>110</div>
</template>
<script lang='ts'>
import { reactive,toRefs,onBeforeMount,onMounted,} from 'vue'
import { useRouter,useRoute} from 'vue-router'//引入路由
export default {name: '',setup() {let router = useRouter(),route = useRoute();const data= reactive({})onBeforeMount(() => {})onMounted(() => {})const refData = toRefs(data);return {...refData,}}};
</script>
<style scoped>
</style>

home

这个文件是调取组件的文件

//这个与2不同 直接这样来写<back-top></back-top><script lang='ts'>components:{//这个要与setup()同级BackTop : defineAsyncComponent(() =>import('../components/conten.vue')),},
</script>

一键回到顶部方法

BackTop.vue

在component创建文件取名为BackTop.vue

<template><transition :name="transitionName"><div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop"><svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height:16px;width:16px"><path d="M12.036 15.59a1 1 0 0 1-.997.995H5.032a.996.996 0 0 1-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" /></svg></div></transition>
</template><script>
export default {name: 'BackTop',props: {visibilityHeight: {type: Number,default: 400},backPosition: {type: Number,default: 0},customStyle: {type: Object,default: function() {return {right: '50px',bottom: '50px',width: '40px',height: '40px','border-radius': '4px','line-height': '45px',background: '#e7eaf1'}}},transitionName: {type: String,default: 'fade'}},data() {return {visible: false,interval: null,isMoving: false}},mounted() {window.addEventListener('scroll', this.handleScroll)},beforeDestroy() {window.removeEventListener('scroll', this.handleScroll)if (this.interval) {clearInterval(this.interval)}},methods: {handleScroll() {this.visible = window.pageYOffset > this.visibilityHeight},backToTop() {if (this.isMoving) returnconst start = window.pageYOffsetlet i = 0this.isMoving = truethis.interval = setInterval(() => {const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))if (next <= this.backPosition) {window.scrollTo(0, this.backPosition)clearInterval(this.interval)this.isMoving = false} else {window.scrollTo(0, next)}i++}, 16.7)},easeInOutQuad(t, b, c, d) {if ((t /= d / 2) < 1) return c / 2 * t * t + breturn -c / 2 * (--t * (t - 2) - 1) + b}}
}
</script><style scoped>
.back-to-ceiling {position: fixed;display: inline-block;text-align: center;cursor: pointer;
}.back-to-ceiling:hover {background: #d5dbe7;
}.fade-enter-active,
.fade-leave-active {transition: opacity .5s;
}.fade-enter,
.fade-leave-to {opacity: 0
}.back-to-ceiling .Icon {fill: #9aaabf;background: none;
}
</style>

index.vue

<template><div class="home"><ul><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><BackTop></BackTop></ul></div>
</template>
<script lang='ts'>
import { reactive,toRefs,onBeforeMount,onMounted,defineAsyncComponent} from 'vue'
import { useRouter,useRoute} from 'vue-router'//引入路由
export default {name: '',components:{//这个要与setup()同级BackTop : defineAsyncComponent(() =>import('../../components/goto.vue')),},setup() {let router = useRouter(),route = useRoute();const data= reactive({})onBeforeMount(() => {})onMounted(() => {})const refData = toRefs(data);return {...refData,}}};
</script>
<style scoped>
.home {height: 100vh;width: 100%;
}
ul {display: block;height: 3000px;background: yellow;
}
</style>

一键回顶部方法2

BackTop.vue

!<template><div class="goto"><div v-if="btnFlag" class="goto" @click="backTop"><img src="https://g.csdnimg.cn/side-toolbar/3.0/images/fanhuidingbucopy.png" alt /></div></div>
</template>
<script>
export default {data() {return {btnFlag: false};},methods: {// 点击图片回到顶部方法，加计时器是为了过渡顺滑backTop() {const that = this;let timer = setInterval(() => {let ispeed = Math.floor(-that.scrollTop / 5);document.documentElement.scrollTop = document.body.scrollTop =that.scrollTop + ispeed;if (that.scrollTop === 0) {clearInterval(timer);}}, 16);},// 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏scrollToTop() {const that = this;let scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;that.scrollTop = scrollTop;if (that.scrollTop > 100) {that.btnFlag = true;} else {that.btnFlag = false;}}},// 初始化获取所有数据mounted() {window.addEventListener("scroll", this.scrollToTop);},destroyed() {window.removeEventListener("scroll", this.scrollToTop);}
};
</script>
<style lang="scss" scoped>
.main {width: 100%;height: 100vh;position: relative;.goto {position: fixed;right: 0;top: 80%;width: 60px;border-radius: 10%;text-align: center;background: gray;}
}
</style>

index.vue

<template><div class="home"><ul><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><li>我是夏利</li><BackTop></BackTop></ul></div>
</template>
<script lang='ts'>
import { reactive,toRefs,onBeforeMount,onMounted,defineAsyncComponent} from 'vue'
import { useRouter,useRoute} from 'vue-router'//引入路由
export default {name: '',components:{//这个要与setup()同级BackTop : defineAsyncComponent(() =>import('../../components/goto.vue')),},setup() {let router = useRouter(),route = useRoute();const data= reactive({})onBeforeMount(() => {})onMounted(() => {})const refData = toRefs(data);return {...refData,}}};
</script>
<style scoped>
.home {height: 100vh;width: 100%;
}
ul {display: block;height: 3000px;background: yellow;
}
</style>

vue3一键回到顶部方法相关推荐

告别繁琐滑动，微信小程序一键回到顶部功能
前言在日常使用微信小程序时,你是否曾经遇到过翻页疲劳的问题?或者在滑动页面时不断滑动才能回到顶部的尴尬情况?如果是这样,那么你一定不想错过今天的文章.我将为大家介绍一种简单而实用的方法,让你轻松实现 ...
js浏览器回到顶部方法_基于JS实现回到页面顶部的五种写法(从实现到增强)
写法 [1]锚点使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [ ...
jq slimScroll 滚动条插件回到顶部方法
找了一圈居然没人写这个回到顶部的方法,只好自己写了.. 直接贴代码 //滚动条设置 $(".myDiv").slimScroll({width: 'auto',height: '1 ...
js浏览器回到顶部方法_js 返回顶部按钮
要求:当鼠标从顶部滚动后,显示返回顶部按钮,点击按钮,页面平滑滚动到顶部,按钮隐藏. 1.css #scrollTop{position:fixed;bottom:20px;right:20px;he ...
uniapp页面回到顶部方法
本文讲的是在uniapp项目中实现页面回顶效果的方法.以下是代码(回顶可能多个页面都需要用到建议封装成一个组件) 一.方法一 <template><view class=" ...
html一键回到顶部,HTML实现简单大方的 “返回顶部” 实例代码
简单的"返回顶部"效果 .cs{ width:50px; height:100px; background-color: #F0F0F0; border:1px solid #D9 ...
Android | ListView、RecyclerView 实现一键回到顶部
一.ListView 1.定义 /*** 列表视图*/private ListView lvPhotoList;/*** 滑动到顶部按钮*/private FloatingActionButton f ...
使用scrollTop回到顶部时间
锚链接使用锚链接方式实现回到顶部效果,是最简便的一种方式,即将标签a中的href属性值设置为#即可:,便可实现一键回到顶部效果.为了提供较好的用户体验,这里使用js实现这个功能. 功能点 1.返回顶 ...
微信小程序回到顶部的两种方式
一,使用view形式的回到顶部 HTML: <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus} ...

vue3一键回到顶部方法

引入组件文件

content

home

一键回到顶部方法

BackTop.vue

index.vue

一键回顶部方法2

BackTop.vue

index.vue

vue3一键回到顶部方法相关推荐

最新文章

热门文章