【Vue项目复习笔记】BackTop组件的封装和使用，显示与隐藏

因为这个组件是个业务组件，所以封装到
components–>content–>新建backTop–>新建BackTop.vue

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

<script>
export default {
  name: 'BackTop'
};
</script>

<style scoped>
.back-top {
  position: fixed;
  right: 8px;
  bottom: 50px;
}

.back-top img {
  width: 50px;
  height: 50px;
}
</style>

将该组件导入到Home.vue中，注册，引用（在better-scroll下面引用，因为它不跟着better-scroll一起滚动）
功能：点击一下，回到顶部
这个需求，首先要监听点击。如果在backtop这个组件里面监听点击的话不太好，因为我们是在滚动区域监听点击的，是滚动的区域回到顶部，意味着我们要拿到better-scroll滚动对象。

也就是backTop组件发生了一个点击事件，要去操作scroll里面的代码。
所以我们直接监听backtop组件点击，就不需要我们组件内部先监听点击，再把事件发出去。
但是组件能不能直接监听点击事件，这是一个问题？
组件是不能直接监听点击的，如果我们想要监听组件点击，我们需要做一件事情，必须要加上.native原生修饰符

 <back-top  @click.native="backClick"></back-top>

修饰符.native修饰符什么时候使用？
在我们需要监听一个组件的原生事件时，必须要给对应的事件加上.native修饰符，才能进行监听。

接着：scroll标签中添加ref="scroll"属性

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

它调用的是scroll组件的scrollTo方法

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

效果如下：

显示与隐藏：
当这个回到顶部按钮达到临界值的时候显示，小于临界值的时候隐藏。所以我们必然要实时监听滚动
在scroll组件中：

props: {
    //probe侦测，0，1都是不侦测实时位置
    //2:在手指滚动的过程中侦测，手指离开后的惯性滚动过程中不侦测
    //3：只要是滚动，都侦测
    probeType: {
      type: Number,
      default: 0
    },
   }

mounted() {
    // 1.创建BScroll对象
    //通过document.querySelector('wrapper')来获取wrapper不是特别好，因为如果有其他的标签设置wrapper,通过这个来获取的就不知道是哪一个了
    this.scroll = new BScroll(this.$refs.wrapper, {
      //这个click是一个布尔类型，默认值为false，作用是：better-scroll默认会阻止浏览器的原生click事件。
      //可以控制类似于div元素是否可以点击的
      click: true,
      probeType: this.probeType,
      pullUpLoad: this.pullUpLoad
    })
    // 2.监听滚动的位置
    this.scroll.on('scroll', (position) => {
      // console.log(position);
      this.$emit('scroll', position)
    })

在我们的Home组件中

 <scroll class="content"
              ref="scroll"
              :probe-type="3">

在我们的scroll组件中，下面一句代码，将位置信息发送出来了，我们就要在home组件里面接收

 this.$emit('scroll', position)

接收：

 <scroll class="content" ref="scroll" :probe-type="3"  @scroll="contentScroll" @scroll="contentScroll">

然后对这个contentScroll方法做一个处理：

 contentScroll(position){
      // console.log(position);
      this.isShowBackTop = (-position.y)>1000
      this.isTabFixed= (-position.y)>this.tabOffsetTop
    },

其中

 this.isShowBackTop = (-position.y)>1000

这一句的意思是判断位置是否大于1000，大于1000的话就显示，否则隐藏。显示和隐藏也是在我们的backTop组件中，所以给backtop组件一个v-show属性

<back-top  @click.native="backClick" v-show="isShowBackTop"></back-top>

当然，在这之前，我们要在data中给它一个默认属性

 isShowBackTop:false,

效果如下：