Vue结合better-scroll实现返回顶部
老样子，封装成一个backTop组件！
<!-- -->
<template>
<div class="back-top">
<img src="" alt="">
</div>
</template>
<script>
export default {
name:'backTop',
data () {
return {
}
}
}
</script>
<style scoped>
.back-top{
position : fixed;
right: 12px;
bottom: 55px;
}
.back-top img{
width: 30px;
height: 30px;
}
</style>
再然后，在首页拿到我们的backTop组件，并注册
import backTop from ' '
export default {
name: "home",
components:{
backTop,
scroll
}
再对scroll组件设置ref属性，拿到我们的组件对象
<scroll class="wrapper" ref="scroll" :probe-type="3">
</scroll>
<div @click="backTop" >
<backTop></backTop>
</div>
在scroll组件中定义方法
props:{
probeType:{
type:Number,
default:0
},
}，
data(){
return {
scroll:null
}
},
methods:{
scrollTo(x,y,time=500){
this.scroll.scrollTo(x,y)
}
}
在首页定义点击事件，并调用scroll组件中的方法
backTop(){
this.$refs.scroll.scroll.scrollTo(0,0)
}
到此实现返回顶部
若需要设置拉到什么位置显示的话
probeType:3
visible:false
this.scroll.on('scroll',(position)=>{
this.$emit('showposition',position)
})
@showposition="limitposition"
limitposition(position){
if(-position.y>1000){
this.visible=true
}else{
this.visible=false
}
}
<backTop @click="backTop" v-show="visible"></backTop>
