vue简易指引用户向下翻阅悬浮效果箭头实现

     在组件mounted阶段，给屏幕添加屏幕滚动监听事件：

mounted: function () {

      window.addEventListener('scroll', this.menu)
 },

     屏幕滚动时，指引箭头消失函数：

menu: function () {

    this.scroll = document.body.scrollTop

    if (this.scroll > 0) {

         this.hd = false

     } else {

         this.hd = true

     }

 },

html:

<div class="btn-arrow" v-show="this.hd">

        <img src="../assets/bottom-arrow.png">

</div>

简单的向下浮动指引的css样式:

.btn-arrow

    {

      margin:0;

      padding: 0;

      width: 0.4rem;

      height: 0.4rem;

      position: fixed;

      left: 50%;

      margin-left: -0.2rem;

      bottom: 2.15rem;

      animation:myfirst 1s infinite;

      animation-direction:alternate;

      -webkit-animation-direction:alternate;

    }

    .btn-arrow img

    {

      width:0.45rem;

      height: 0.3rem; 

    }

    @keyframes myfirst

    {

      0%   {opacity:1; left: 50%;bottom: 2.15rem;}

      /*25%  {opacity:0.4; left: 4.6rem;bottom: 2.75rem;}*/

      50%  {opacity:0.6; left: 50%;bottom: 2.25rem;}

      /*75%  {opacity:0.8; left: 4.6rem;bottom: 2.9rem;}*/

      100% {opacity:0.2; left: 50%;bottom: 2.35rem;}

    }