关于BackTop按钮的实现

今天在处理，首页面的制作的时候，在实现backtop按键的时候，有些思路，作为记录。

功能为，点击backtop即可，立马跳到首页的最上面，且backtop只有在页面后1/2处才显示出来。

首先，我们先在components文件中建立一个vue文件，命名为backtop。我在阿里矢量图处，找了一个相应的图片，并设置其为position为fixed（这块简单，不赘述。）并在home.vue中引入并注册backtop组件。

之后，为了实现，点击它即可回归顶部位置的作用。最开始的想法是在，backtop的methods里面写一个方法之后利用其与home的父子关系，再通过scroll与home的关系，进行操作。但是想想还是比较费事，想起前几天看一个博客想起了，@click事件，其中有一个修饰符为native。父组件想在子组件上监听自己的click的话，只需要加上native修饰符。那么这样写的话，就很简单也方便了。

 <backtop @click.native="backclick"></backtop>

methods:{
    backclick(){
      // this.$refs.scroll.scroll.scrollTo(0,0,1000)
      this.$refs.scroll.scrollTo(0,0)
    }
}

<scroll class="content" ref="scroll">

这需要在home.vue中如此写即可。<script>

import BScroll from "better-scroll"
export default {
  name: "scroll",
  data(){
    return{
      scroll:null
    }
  },
  mounted(){
    //1.创建BScroll对象
this.scroll = new BScroll(this.$refs.wrapper,{
click:true,
})

}
</script>

这是在scroll组件中的代码

这里的methods，我使用了ref。首先，ref可以给scroll子组件绑定一个特定id，之后通过，this.$refs.id即可以访问到该组件了。

那么具体在此例中的写法就如上述代码块2的注释行与代码块3所写。注意下scrollTo函数，第一与第二个参数分别是：要在窗口文档显示区左上角显示的文档的 x 坐标与y坐标。第三个参数是时间,单位为毫秒。

还有第二种写法，看起来更为清晰点。

直接在scroll.vue文件中，直接在methods中设定一个方法：

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

而在home.vue中的methods中直接设定为：

methods:{
    backclick(){
      this.$refs.scroll.scrollTo(0,0)
    }
}

这样的话，即可实现了点击回到顶部的功能。

接下来，做第二部处理，即为只有在一定的位置的时候，backtop才会显示。而在比较上方的位置的时候，不显示backtop。

这里的话，首先对scroll进行了一定的处理，那么我们先监听滚动的位置，这样的处理的话，我们即可先在scroll的mounted当中，设置：

mounted(){
    //1.创建BScroll对象
this.scroll = new BScroll(this.$refs.wrapper,{
click:true,
  probeType:this.probeType
})
    //2.监听滚动的位置
    this.scroll.on("scroll",(position)=>{
 console.log(position);
    })

记住，如果要监听的话，必须在BScroll对象当中，添加probeType。由于，这个组件不一定只用在主页当中，所以我们可以把probeType暴露给外属性，让用户来设置。因此，这边我进行了一个设置，把probeType，通过props进行。

 props:['probeType'],
  data(){
    return{
      scroll:null
    }

因此在home.vue中，关于<scroll>组件，而如果在scroll.vue中写死，probeType为3的时候，会影响性能。因此，我们可以直接在此组件标签上传递，home页面所需的probeType值，这里我设置为3。记住，这里必须要使用v-bind/：，如果不使用的话，也能传入，但是会将其识别为一个字符串，而不是Number。设置完成后，目前就实现了实时监听啦~

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

之后，因为我们需要将其滚动位置传出去，因此我们可以在scroll.vue中的mounted里面的位置监听中，将其传递出去给home.vue。

那么只需要如下代码进行子传父即可。

 this.scroll.on("scroll",(position)=>{
      // console.log(position);
      this.$emit("scroll",position)
    })

之后，我们在home.vue中，进行实际操作。

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

因为，我们这次操作的目的是，为了解决，在一定位置的时候，才显示backtop组件，而且这个需要反复使用，因此我们不去使用v-if，而是使用v-show。

 <backtop @click.native="backclick" v-show="isshow"></backtop>

 data(){
    return{
      isshow:false
    }
  },
 methods:{
    contentscroll(position){
      // console.log(position);
     this.isshow= (-position.y) > 1000
    }
  }

根据上述代码就实现了，backtop的在一定位置的时候的隐藏，以及一定位置后的出现。