在每个车轮事件上更改页面

Question

我很难解决这个问题。用户使用滚轮时尝试更改页面（组件）。这些是我正在尝试的参考页。

http://www.harukimurakami.com/

https://redredefined.preciosacomponents.com/

因此，我尝试添加active类的第一个元素，并在每次用户使用wheel时将其从最后一个元素中删除。但是很难。

name: 'home',
components: {
    "news-landing": newslanding,
    "news-library": newslibrary,
    "news-contact": newscontact,
},
data(){
    return {
    };
},
created () {
    window.addEventListener('wheel', this.handleScroll);
},
destroyed () {
    window.removeEventListener('wheel', this.handleScroll);
},
methods: {
    handleScroll(event) {
        const delta = Math.sign(event.deltaY);

        let classes = [];
        let nodes = [];
        classes = document.querySelectorAll(".common");
        nodes = Array.prototype.slice.call(classes, 0);
        if (delta == 1) {
            nodes.forEach((item, key) => {
                if (item.classList.contains("active")) {

                }
            })
        }

    }
}

这是实时代码沙箱：

https://codesandbox.io/s/vue-template-jr06x

Answer 1

您应该这样更改方法：

handleScroll(event) {
  const delta = Math.sign(event.deltaY);

  let i;
  let nodes = document.querySelectorAll(".common");
  for(i = 0; i < nodes.length; i++)
  {
    if(nodes[i].classList.contains('active'))
    {
      if(delta>0)
      {
        if(i < nodes.length - 1)
        {
          nodes[i].classList.remove('active');
          nodes[i+1].classList.add('active');
          break;
        }
      }
      else
      {
        if(i > 0)
        {
          nodes[i].classList.remove('active');
          nodes[i-1].classList.add('active');
          break;
        }
      }
    }
  }
}