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

Question

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

http://www.harukimurakami.com/

https://redredefined.preciosacomponents.com/

所以我试图添加active类第一个元素，并在每次用户使用轮子时从最后一个元素中删除它。但是过得很艰难。

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

标签： javascriptvue.js

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;
        }
      }
    }
  }
}