Vue制作固定定位图标滑动隐藏效果

写在前面
移动端页面，有时候会出现一些固定定位在底部图标，比如购物车等。这时候如果添加一个滑动页面，图标透明度变低，同时 移动到屏幕边进行隐藏，效果如下。

滑动前后效果对比

所用原理

监听滑动事件，每次进行滑动时，触发动画，添加定时器，1.4s后显示该图标。具体代码如下：

<template>
    <section class="fixed-icon"
             :style="{ bottom: bottom + 'rem' }"
             :class="[ !transition ? 'fixed-transition' : '']"
             @click="event">
        <slot></slot>
    </section>
</template>
<script>
  export default {
    name: 'fixedIcon',
    props: {
      bottom: { // 改图标距离底部距离 单位 rem
        type: Number,
        default: 3,
      },
    },
    data () {
      return {
        transition: true, // 是否触发动画
        timer: null, // 定时器
      };
    },
    methods: {
      event() {
        this.$emit('clickEvent'); // 绑定点击图表时间
      },
      handleScroll () { // 每次滑动都会执行函数
        this.transition = false;
        if (this.timer) { // 判断是否已存在定时器
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => { // 创建定时器，1.4s后图标回归原位置
          this.transition = true;
        }, 1400);
      }
    },
    mounted () {
      window.addEventListener('scroll', this.handleScroll); // 监听页面滑动
    }
  };
</script>

<style scoped lang="scss">
    /*@media only screen and (min-width:750px){html{font-size:20px}} */
    .fixed-icon{
        position: fixed;
        z-index: 1100;
        right: 1.7rem;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 4.1rem;
        width: 4.1rem;
        border-radius: 50%;
        background-color: rgba(128, 128, 128, 0.8);
        transition: 0.7s ease-in-out;
    }
    .fixed-transition{
        right: -2.05rem;
        opacity: 0.4;
        transition: 1s ease-in-out;
    }
</style>

引入代码如下：

<template>
    <section class="content">
        <fixed-icon :bottom="3" @clickEvent="chat">
            <i class="icon-chat"></i>
        </fixed-icon>
    </section>
</template>

<script>
  import fixedIcon from './components/fixedIcon.vue';

  export default {
    name: 'test',
    components: {
      fixedIcon
    },
    data () {
      return {
      };
    },
    methods: {
      chat() { // 图标点击事件
        console.log('你好');
      },
    },
    mounted() {
      document.title = 'Vue制作固定定位图标滑动隐藏效果';
    },
  };
</script>

<style scoped lang="scss">
    .content{
        height: 200vh;
    }
    .icon-chat{
        width: 2rem;
        height: 1.9rem;
        background: url('http://pfpdwbdfy.bkt.clouddn.com/image/test/fixedIconTranstion/wechat.png') no-repeat;
        background-size: 2rem 1.9rem;
    }
</style>

github代码