添加按钮不会在底部出现，根据页面来固定位置

1，首先让按钮浮动底部在底部下面

    <div class="add">
      <span class="iconfont icon-add"></span>
    </div>

  .add{
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 56px;
    height: 56px;
    background: #202020;
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    border-radius: 28px;
    transition: @tr;
    .iconfont{
      text-align: center;
      line-height: 56px;
      font-size: 24px;
      color: #D8D8D8;
    }
  }

2，如果让按钮不会触底到底部就要监听页面滚动

css
<div class="add" :style="{bottom:addBottom+'px'}">
  <span class="iconfont icon-add"></span>
</div>

js
//监听页面高度
    data(){
        return {
            addBottom:30,
        }
    }
     scrollBottom(){
      // 距离顶部高度
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      // 屏幕高度
      let clienHeight = document.documentElement.clientHeight;
      // 内容高度
      let scrollHeight = document.documentElement.scrollHeight;

      if(scrollTop+clienHeight+230>=scrollHeight){
        this.addBottom = scrollTop+clienHeight+230-scrollHeight
      }else{
        this.addBottom = 30;
      }
    }

定位可以不用bottom，因为我们动态的实现控制

成功实现效果

取消监听

unmounted(){ // 监听滚动高度变化 window.addEventListener('scroll',this.scrollBottom) }