vant居然没有返回顶部组件没办法自己封装一个
<template>
<div>
<van-button
color="rgba(0,0,0,.3)"
round
class="backTop"
size="mini"
@click="backTop"
v-show="scrollType"
>
<van-icon class="icon-backTop" name="arrow-up" size="15" />
</van-button>
</div>
</template>
<script>
export default {
name: 'backTop',
data () {
return {
scrollType: false, // 控制按钮显示和隐藏
timerId: null,
scrollTop: 0
}
},
// 组件创建监听scroll此方法
mounted () {
window.addEventListener('scroll', this.handleScoll, true)
},
// 组件销毁移除监听
destroyed () {
window.removeEventListener('scroll', this.handleScoll)
window.clearInterval(this.timerId)
},
methods: {
backTop () {
this.timerId = setInterval(() => {
// 给返回增加动画效果
const upSpeed = Math.floor(-this.scrollTop / 5)
document.documentElement.scrollTop = this.scrollTop + upSpeed
if (this.scrollTop === 0) {
clearInterval(this.timerId)
}
}, 30)
},
handleScoll (ev) {
// 当滚动的距离大于700 时出现该按钮
this.scrollTop = window.pageYOffset
if (window.pageYOffset / 100 > 7) {
this.scrollType = true
} else {
this.scrollType = false
}
}
}
}
</script>
<style scoped lang='less'>
.backTop {
position: fixed;
bottom: 0.4rem;
right: 0.2rem;
z-index: 999;
border: none;
}
</style>
3.0版本
<template>
<div class="backTop" v-show="scrollType" @click.stop="backTop">
<van-icon name="arrow-up" color="#fff" />
</div>
</template>
<script>
import { reactive, toRefs } from '@vue/reactivity'
import { onBeforeUnmount, onMounted } from 'vue-demi'
export default {
name: 'backTop',
setup () {
const state = reactive({
scrollType: false, // 控制按钮显示和隐藏
timerId: null,
scrollTop: 0
})
function backTop () {
state.timerId = setInterval(() => {
// 给返回增加动画效果
const upSpeed = Math.floor(-state.scrollTop / 5)
document.documentElement.scrollTop = state.scrollTop + upSpeed
if (state.scrollTop === 0) {
clearInterval(state.timerId)
}
}, 30)
}
function handleScoll (ev) {
// 当滚动的距离大于700 时出现该按钮
state.scrollTop = window.pageYOffset
if (window.pageYOffset / 100 > 7) {
state.scrollType = true
} else {
state.scrollType = false
}
}
onBeforeUnmount(() => {
window.removeEventListener('scroll', handleScoll)
clearInterval(state.timerId)
})
onMounted(() => {
window.addEventListener('scroll', handleScoll)
})
return {
...toRefs(state),
backTop
}
}
}
</script>
<style lang='less'>
.backTop {
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
position: fixed;
bottom: 60px;
right: 10px;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 50%;
z-index: 999;
}
</style>