今天在处理,首页面的制作的时候,在实现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的在一定位置的时候的隐藏,以及一定位置后的出现。