Vue結(jié)合better-scroll實現(xiàn)返回頂部
老樣子，封裝成一個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組件設(shè)置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)
????}
??}
在首頁定義點擊事件，并調(diào)用scroll組件中的方法
backTop(){
??????this.$refs.scroll.scroll.scrollTo(0,0)
}
到此實現(xiàn)返回頂部
若需要設(shè)置拉到什么位置顯示的話
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>
