如何在vue中滚动顶部和底部
如何在vue中滚动顶部和底部
提问于 2022-06-01 05:37:26
我正在工作滚动到顶部和底部按钮使用vuetify。
目前，我只能滚动到底部的页面。当用户到达页面底部时，我希望它能够滚动到页面的顶部，反之亦然。
我尝试使用v-if和v-else，但它似乎不起作用。知道如何在一个按钮中实现上下滚动吗？
ScrollToTopBottom.vue
<template>
<div>
<v-btn v-if = "!isVisible"
v-scroll="onScroll" v-show="isVisible" fab fixed bottom right color="primary" @click="toBottom">
<v-icon>mdi-arrow-down-bold-box-outline</v-icon>
</v-btn>
<v-btn v-else
v-scroll="onScroll" v-show="isVisible" fab fixed bottom right color="primary" @click="toTop">
<v-icon>mdi-arrow-up-bold-box-outline</v-icon>
</v-btn>
</div>
</template>
<script>
export default{
data () {
return {
isVisible: false
}
},
methods: {
onScroll () {
this.isVisible = window.scrollY > 50
},
toTop () {
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
}
)
},
toBottom(){
window.scrollTo({
top: document.body.scrollHeight,
behavior: 'smooth'
})
}
}
}
</script>回答 1
Stack Overflow用户
回答已采纳
发布于 2022-06-01 08:07:32
试着像下面这样的片段：
Vue.component('scrollToTopButton', {
template: `
<div v-scroll="onScroll">
<v-btn v-if="!isVisible" fab fixed bottom right color="primary" @click="toBottom">
<v-icon>mdi-arrow-down-bold-box-outline</v-icon>
</v-btn>
<v-btn v-else fab fixed bottom right color="primary" @click="toTop">
<v-icon>mdi-arrow-up-bold-box-outline</v-icon>
</v-btn>
</div>
`,
data () {
return {
isVisible: false
}
},
methods: {
onScroll() {
this.isVisible = window.scrollY > 50
},
toTop() {
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
})
},
toBottom(){
window.scrollTo({
top: document.body.scrollHeight,
behavior: 'smooth'
})
}
}
})
new Vue({
el: "#demo",
vuetify: new Vuetify(),
})<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="demo" >
<v-app>
<v-main>
<v-container>
<div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div>
<scroll-to-top-button />
</v-container>
</v-main>
</v-app>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72456875
复制相关文章
相似问题
腾讯云开发者
