封装BackTop组件

①在公共组件文件夹content中新建backTop文件夹，再新建BackTop组件
②BackTop.vue中写好html，再写好图片的大小定位样式

<div class="back-top">
    <img src="~assets/img/common/top.png" alt="">
</div>

③Home.vue中导入注册组件，写好<back-top/>组件标签；监听backtop组件的点击事件，需要添加修饰符.native(监听组件根元素的原生事件)才管用<back-top @click.native="backClick"/>；scroll组件标签上面添加ref="scroll"，添加点击回到顶部事件

backClick() {
    this.$refs.scroll.scrollTo(0, 0)
},

④Scroll.vue中封装好scrollTo事件

methods: {
    scrollTo(x, y, time=1000) {
      this.scroll.scrollTo(x, y, time)
    }
}

⑤Scroll.vue中监听滚动区域，滚动到一定位置再显示。

props: {
	probeType:{
		type: Number,
		default: 0
	}
}
mounted() {
	//1. 创建scroll对象
 	this.scroll = new BScroll(this.$refs.wrapper,{
		click: true,
		probeType: this.probeType  //probeType不能写死为3，因为有的页面需要实时监听，有的页面不需要实时监听，去上面创建一个props让它默认为0，就可以根据传入的值决定要不要监听。
    })
    
    //2. 监听滚动的位置
    this.scroll.on('scroll', (position)=> {
    	this.$emit('scroll', position)// position不是在这个scroll组件中用的，也不需要用它，谁需要就把position传给谁；通过自定义事件$emit传出去。
	})
}

⑥在Home.vue中的scroll组件上需要实时监听，所以在这里绑定传入参数；接收$emit传出来的自定义事件，然后在scroll组件上监听事件

<scroll :probe-type="3" @scroll="contentScroll"></scroll>

contentScroll(positon) {
	this.isShowBackTop = (-positon.y) > 1000 //滚动位置大于1000才显示
}

⑦<back-top v-show="isShowBackTop"/>默认不显示，在data中写一个isShowBackTop: false;//默认是个false