【学习笔记】【领券联盟】前端(Nuxt.js)——13.添加回到顶部按钮以及悬浮菜单栏、回到顶部

引子

通常一个页面会有回到顶部的按钮，这样可以快速回看以往的内容。除此之外，对于我们这个网站目录可以悬浮，这样可以快速看到对应类别的商品。

1.回到顶部按钮

在pages/index.vue的类别代码中添加回到顶部按钮，如下：

<div class="recommend-category-box">
        <ul class="clear-fix" >
          <li :class="item.favorites_id!==currentFavoriteId?'float-left':'float-left recommend-menu-active'" v-for="(item, index) in categories" :key="index"
          @click="onCategoryItemClick(item)">
            {{item.favorites_title}}
          </li>
          <!--回到顶部按钮-->
          <li class="float-right">回到顶部</li>
        </ul>
      </div>

这里还需要在layouts/default.vue中添加右浮动的代码：

  .float-right{
    float: right;
  }

这样全局就可以共用了。页面效果如下：

使用饿了吗UI进行美化，即在class中添加"el-icon-upload2"删除文字即可，然后继续美化，对回到顶部的标签设置如下：

          <!--回到顶部按钮-->
          <li class="float-right el-icon-upload2 back-top"></li>

为了能够全局共用，则在layouts/default.vue中添加如下代码：

  .back-top:hover{
    border: #c9302c 1px solid;
  }
  .back-top{
    height: 30px;
    width: 30px;
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: 50%;
    line-height: 30px;
    text-align: center;
    border: #8c8c8c 1px solid;
    color: #8c8c8c;
  }

2.固定菜单栏

修改菜单所在盒子原为class改为id并修改对应css的标签选择器，然后修改如下css：

  #recommend-content-list-box{
    margin-top: 100px;
    box-shadow: 0 5px 10px #d4d4d4;
  }
  #recommend-category-box{
    height: 60px;
    line-height: 58px;
    position: fixed;
    z-index: 1000;
    top: 90px;
    width: 1140px;
    background: white;
    box-shadow: 0 5px 10px #d4d4d4;
  }

完善滑动页面菜单栏变化： 构建一个监听事件：

  // vue周期函数（页面出现之前）
  mounted() {
this.onScroll(); // 中间刷新也跳上去
    let listBox = document.getElementById("recommend-content-list-box");
    if (listBox){
      listBox.style.minHeight = document.documentElement.clientHeight + 'px';
    }
    window.addEventListener('scroll', this.onScroll)
  },

然后，在methords中添加如下函数：

    onScroll(){
      let menuBox = document.getElementById('recommend-category-box');
      if (menuBox){
        let dy = document.documentElement.scrollTop;  // 获取滑动间距
        if (dy < 90){
          menuBox.style.top = (90 - dy) + 'px';
        }else {
          menuBox.style.top ='0px';
        }
      }
    },

3.回到顶部事件

为回到顶部设置链接：

 <!--回到顶部按钮-->
          <li class="float-right ">
            <a href="#top">
              <span class="el-icon-upload2 back-top"></span>
            </a>
          </li>

然后调整span对应的样式（在layouts/default.vue中）：

  .back-top:hover{
    color: #c9302c;
    border: #c9302c 1px solid;
  }

另外一种方式就是，点击菜单的时候直接回到顶部，如下：

 onCategoryItemClick(item){
      // document.documentElement.scrollTop = 0;
      this.currentFavoriteId = item.favorites_id;
      this.currentCategory = item.favorites_title.split("").join("<em>/</em>");
      // 加载内容
      this.loadContentByCategory(item.favorites_id);
    },