开发一个官网的时候，遇到这种整屏切换需求，并且滚轮控制切换。
swiper有类似效果，但是感觉不符合我的理想效果

而描点跳转 我曾想用 scrollIntoView 但是因为滑轮监听挂载在 mouted方法，而 scrolltoView 在mouted 中会失效。最终放弃用scrollintoView。

其次vue 也有专门的 Vue-scrollto 组件，但是他的调用方式是绑定在标签上， 如果要实现滚轮滑动来变化 显然不符合效果。

最后决定使用原生api来写。

核心思想：

第一步，获取所有节点offsetTop 高度

内容代码：

  <div class="page flex-col" id="index-page">
    <div class="bd1 flex-col">
      //滚动的内容
      <div class="outer1 flex-col pagep page1" id="page1" ref="page1">
          ...
      </div>
      <div class="outer4 flex-col pagep page2" id="page2" ref="page2">
      </div>
          ...
      <div class="outer16 flex-col pagep page7" id="page7" ref="page7">
      </div>
      //控制圆点
      <div class="dian">
        <ul>
          <li :class="{ da: index == 1 }" @click="jump(0)"></li>
          <li :class="{ da: index == 2 }" @click="jump(1)"></li>
          ...
          <li :class="{ da: index == 7 }" @click="jump(6)"></li>
        </ul>
      </div>
    </div>
  </div>

关键代码：

export default {
  data() {
    return {
      // 滚动前，滚动条距文档顶部的距离
      index: 1,
      jumpgroup: [],
      loading: true,
    };
  },
  mounted() {
    this.jumpgroup = document.querySelectorAll(".pagep"); //获取所有滚动子项目
    // chrome and ie（谷歌和IE） 
    document
      .getElementById("index-page")
      .addEventListener("mousewheel", this.handleScroll, false); //在谷歌ie浏览器绑定鼠标滚动事件
    // firefox（火狐）
    document
      .getElementById("index-page")
      .addEventListener("DOMMouseScroll", this.handleScroll, false); //在 Firefox 浏览器中监听鼠标滚轮事件。
    this.jump(0); //默认第一幅内容
  },
  methods: {
    //实现页面滚动到指定位置的效果
    jump(index) {
      this.index = index + 1;
      let total = this.jumpgroup[index].offsetTop + 120; //获取目标元素的偏移量，并加上120的偏移量作为最终滚动位置
      // Chrome
      document.body.scrollTop = total; // 设置文档主体的滚动位置为 total
      // Firefox
      document.documentElement.scrollTop = total; // 设置文档根元素的滚动位置为 total
      // Safari
      window.pageYOffset = total; // 设置页面的纵向滚动位置为 total
    },
    //鼠标滚动回调
    handleScroll(e) {
      // console.log(e);
      //用来判断滚轮是向上滑动还是向下 e.deltaY大于0是向下 反之向上
      let direction = e.deltaY > 0 ? "down" : "up";
      //鼠标滚轮向下或后
      if (this.loading) {
        this.loading = false;
        if (direction == "down") {
          // console.log(this.target);
          if (this.index == 7) {
            this.index = 7;
          } else {
            this.index = this.index + 1;
            this.jump(this.index - 1);
          }
          if (this.index == 2) {
            this.$refs.count1.start();
            this.$refs.count2.start();
            this.$refs.count3.start();
          }
          setTimeout(() => {
            this.loading = true;
          }, 300);
        } else {
          if (this.index == 1) {
            this.index = 1;
          } else {
            this.index = this.index - 1;
            this.jump(this.index - 1);
          }

          if (this.index == 2) {
            this.$refs.count1.start();
            this.$refs.count2.start();
            this.$refs.count3.start();
          }
          setTimeout(() => {
            this.loading = true;
          }, 300);
        }
      }
    },
  },
};

最后附上效果图：