vue.js - Nuxt/Vue/Bootstrap-vue 在滚动时收缩导航栏

Question

用 Nuxt 学习 Vue。想要根据页面滚动位置更改导航栏类。

找了好几个 地方，都没有找到有效的解决方案。

这是我必须使用的：

``` default.vue
<template lang="pug">
div(v-on:scroll="shrinkNav", v-on:click="shrinkNav")
  b-navbar.text-center(toggleable="sm" type="light" sticky v-b-scrollspy)
    #myNav.mx-auto.bg-white
      b-navbar-toggle(target="nav_collapse")
      b-navbar-brand.mx-auto(href="#") 
        | Example.org
      b-collapse#nav_collapse.mx-auto(is-nav='')
        b-navbar-nav(justified, style="min-width: 600px").vertical-center
          b-nav-item.my-auto(href='#home') Home
          b-nav-item.my-auto(href='/how') How
          i.fab.fa-earlybirds.fa-2x.mt-2.mb-3
          b-nav-item.my-auto(href='/values') Values
          b-nav-item.my-auto(href='/join-us') Join Us
  #content.container(v-on:scroll="shrinkNav", v-on:click="shrinkNav")
nuxt
    nuxt
</template>

<script>
  // resize navbar on scroll
  export default {
    methods: {
      shrinkNav() {
        var nav = document.getElementById('nav')
        var content = document.getElementById('content')
        if (nav && content) {
          if(content.scrollTop >= 150) {
            nav.classList.add('shrink')
          } else {
            nav.classList.remove('shrink')
          }
        }
        console.log(document.documentElement.scrollTop || document.body.scrollTop)
      }      
    }
  }
</script>
```

shrinkNav点击时运行两次，但滚动时没有。Vue/Nuxt 的方法是什么？

标签： vue.jsvuejs2nuxt.jsbootstrap-vue

Answer 1

在您的.vue 中：

<template>部分：

<nav id="nav" class="navbar is-transparent is-fixed-top">

<script>部分：

export default {
mounted() {
      this.$nextTick(function(){
        window.addEventListener("scroll", function(){
          var navbar = document.getElementById("nav");
          var nav_classes = navbar.classList;
          if(document.documentElement.scrollTop >= 150) {
            if (nav_classes.contains("shrink") === false) {
              nav_classes.toggle("shrink");
            }
          }
          else {
            if (nav_classes.contains("shrink") === true) {
              nav_classes.toggle("shrink");
            }
          }
        })
      })
    },
}

Codesandbox 上的现场演示