【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,

效果如下:
请添加图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

纵有千堆雪与长街

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值