通过在应用程序中使用$vuetify
对象上找到的goTo
方法,可以通过编程触发滚动来实现Vuetify解决方案。
<v-btn
class="md-5 mr-3 elevation-21"
dark
fab
button
right
color="indigo darken-3"
fixed
@click="$vuetify.goTo('#topMostElement', goToOptions)
>
选项可以绑定以控制缓动的持续时间和样式:
data: () => {
return {
goToOptions: {
duration: 10000,
offset: 0,
easing: 'easeInOutCubic',
},
};
},
此外,可以使用Vuetify的
v-scroll
指令来提供回调函数,以便在页面开始滚动之前将按钮隐藏。在此示例中,我们检测窗口滚动。请注意保留HTML标签。
<v-btn
class="md-5 mr-3 elevation-21"
dark
fab
button
right
color="indigo darken-3"
fixed
@click="$vuetify.goTo('#topMostElement', goToOptions)
v-scroll="onScroll"
v-show="showGoToTop"
>
然后捕获页面顶部的偏移量,并使用任意滚动旅程来显示按钮。
data: () => {
return {
offsetTop:0,
goToOptions: {
duration: 10000,
offset: 0,
easing: 'easeInOutCubic',
},
};
},
computed:{
showGoToTop () {
return this.offsetTop > 200;
},
},
methods: {
onScroll (event) {
this.offsetTop = event.target.scrollingElement.scrollTop;
},
},