整屏垂直滚动

   <!-- 左侧导航条写在父组件里-->
          <div class="nav-left kxb-hidden-small kxb-hidden-medium">
            <!-- 左侧竖线 -->
            <div class="vertical-line"></div>
            <div class="menu">
              <div class="menu-arrow">
                <i
                  class="el-icon-arrow-up"
                  :class="{ up: current != 1, 'kxb-pointer': current != 1 }"
                  @click="clickNav(current - 1)"
                ></i>
              </div>
              <div>
                <div
                  class="kxb-pointer nav-item kxb-margin-top-1 kxb-margin-bottom-1"
                  @click="clickNav(1)"
                >
                  <div class="circle hide" :class="{ show: current == 1 }"></div>
                  <div class="txt">首页</div>
                </div>
                <div
                  class="kxb-pointer nav-item kxb-margin-top-1 kxb-margin-bottom-1"
                  @click="clickNav(2)"
                >
                  <div class="circle hide" :class="{ show: current == 2 }"></div>
                  <div class="txt">主办单位</div>
                </div>
                <div
                  class="kxb-pointer nav-item kxb-margin-top-1 kxb-margin-bottom-1"
                  @click="clickNav(3)"
                >
                  <div class="circle hide" :class="{ show: current == 3 }"></div>
                  <div class="txt">特色板块</div>
                </div>
                <div
                  class="kxb-pointer nav-item kxb-margin-top-1 kxb-margin-bottom-1"
                  @click="clickNav(4)"
                >
                  <div class="circle hide" :class="{ show: current == 4 }"></div>
                  <div class="txt">特邀嘉宾</div>
                </div>
              </div>
              <div class="menu-arrow">
                <i
                  class="el-icon-arrow-down"
                  :class="{ down: current != 4, 'kxb-pointer': current != 4 }"
                  @click="clickNav(current + 1)"
                ></i>
              </div>
            </div>
          </div>
            .nav-left{
    width: 140px;
    height: calc(~"100vh - 60px");
    position: fixed;
    left: 5%;
    z-index: 99;
    display: flex;
    // justify-content: space-between;
    color: #fff;
    font-size: 18px;
    align-items: center;
    .vertical-line {
      width: 1px;
      background-color: #fff;
      height: 100%;
      opacity: 0.5;
    }
    .menu {
      width: 90%;
      height: 95%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .menu-arrow {
        padding-left: 25px;
        i {
          font-size: 28px;
          transition: All 0.4s ease-in-out;
          opacity: 0.6;
        }
        .down,
        .up {
          opacity: 1;
        }
        .down:hover {
          transform: translate(0, 5px);
        }
        .up:hover {
          transform: translate(0, -5px);
        }
      }
    }
    .circle {
      width: 6px;
      height: 6px;
      background-color: #fff;
      border-radius: 50%;
      position: relative;
      left: -3px;
    }
    .txt {
      margin-left: 25px;
    }
    .nav-item {
      display: flex;
      align-items: center;
      // justify-content: space-between;
    }
  }

 clickNav(index) {
      if (index > 0 && index <= 4) {
        this.$refs["homeTab"].clickToWheel(this.current, index);
        // }else{
        //   this.$refs['homeTab'].mouseWheelHandle()
      }
    },

<template>
  <div>
    <div class="fullPage kxb-hidden-small kxb-hidden-medium" ref="fullPage">
      <div
        class="fullPageContainer"
        ref="fullPageContainer"
        @mousewheel="mouseWheelHandle"
        @DOMMouseScroll="mouseWheelHandle"
      >
        <div
          id="slide1"
          class="kxb-content kxb-slide"
          :style="{ height: clientHeight + 'px' }"
          style=""
        >
          <!-- PC banner -->
          
          <img
            class="anima"
            :style="{ 'max-height': clientHeight - 40 + 'px' }"
            style="max-width:75%;" 
            :src="bannerImgPC"
          />
        </div>
        <div
          id="slide2"
          class="kxb-content kxb-slide"
          :style="{ height: clientHeight + 'px' }"
        >
          <div class="kxb-center-div kxb-padding-top-1">
            <p v-if="clientHeight > 600" class="kxb-padding-top-3">
              <!-- 大屏幕的时候间距要大一些-->
            </p>
            <h3 class="kxb-font-30 kxb-textcolor-white kxb-margin-bottom-0">主办单位</h3>
            <h3 class="kxb-font-30 kxb-textcolor-white kxb-margin-top-0">
              Organizational Structure
            </h3>
            <p v-if="clientHeight > 600" class="kxb-padding-top-3">
              <!-- 大屏幕的时候间距要大一些-->
            </p>
            <div class="kxb-fluid kxb-padding-top-2" style="padding: 0">
              <div
                class="kxb-col-12-4 kxb-col-medium-12-12"
                style="padding: 0"
                v-for="item in plate"
                :key="item._id"
              >
                <a :href="item.url"><img :src="item.imgUrl" class="kxb-resize" /></a>
                <p
                  class="kxb-font-16 kxb-textcolor-white kxb-bold kxb-center kxb-margin-top-0"
                >
                  {{ item.title }}
                </p>
              </div>
            </div>
          </div>
        </div>
        <div
          id="slide3"
          class="kxb-content kxb-slide"
          :style="{ height: clientHeight + 'px' }"
        >
          <div class="kxb-center-div kxb-padding-top-1">
            <p v-if="clientHeight > 600" class="kxb-padding-top-3">
              <!-- 大屏幕的时候间距要大一些-->
            </p>
            <h3 class="kxb-font-30 kxb-textcolor-white kxb-margin-bottom-0">特色板块</h3>
            <h3 class="kxb-font-30 kxb-textcolor-white kxb-margin-top-0">
              Conference Board
            </h3>
            <a :href="features[0].url"
              ><img :src="features[0].imgUrl" class="kxb-resize"
            /></a>
            <p
              v-if="features[0].title"
              class="kxb-font-16 kxb-textcolor-white kxb-bold kxb-center kxb-margin-top-0"
            >
              {{ features[0].title }}
            </p>
          </div>
        </div>
        <div
          id="slide4"
          class="kxb-content kxb-slide"
          :style="{ height: clientHeight + 'px' }"
        >
          <div class="kxb-center-div kxb-padding-top-1">
            <p v-if="clientHeight > 600" class="kxb-padding-top-3">
              <!-- 大屏幕的时候间距要大一些-->
            </p>
            <h3 class="kxb-font-30 kxb-textcolor-white kxb-margin-bottom-0">特邀嘉宾</h3>
            <h3 class="kxb-font-30 kxb-textcolor-white kxb-margin-top-0">
              Special Guests
            </h3>
            <div class="kxb-fluid">
              <div class="kxb-col-5-1 kxb-col-medium-12-3 kxb-center" v-for="i in 10">
                <div class="kxb-padding-content kxb-padding-top-0 kxb-padding-bottom-0">
                  <a href="">
                    <img
                      src=""
                      alt=""
                      class="kxb-circle kxb-resize"
                  /></a>
                  <p class="kxb-margin-bottom-0">
                    <a
                      href=""
                      class="kxb-textcolor-white"
                      ></a
                    >
                  </p>
                  <p class="kxb-font-12 kxb-margin-top-0 kxb-padding-top-0">
                    <a
                      href=""
                      class="kxb-textcolor-white"
                      >大连理工大学</a
                    >
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="kxb-hidden-large kxb-hidden-xlarge mobile">
      <div id="slide1" class="kxb-content">
        <div style="padding: 13px 5%">
          <!-- PC banner -->
          <img
            class="kxb-resize anima"
            :src="bannerImgPC"
            style="width: 100%; height: auto"
          />
        </div>
      </div>
      <div id="slide2" class="kxb-content kxb-padding-bottom-1 kxb-padding-top-1">
        <div class="center-div">
          <h3 class="kxb-h4 kxb-textcolor-white kxb-margin-bottom-0">主办单位</h3>
          <h3 class="kxb-h4 kxb-textcolor-white kxb-margin-top-0">
            Organizational Structure
          </h3>

          <div class="kxb-fuid">
            <div class="kxb-col-12-12 kxb-center" v-for="item in plate" :key="item._id">
              <a :href="item.url"><img :src="item.imgUrl" class="kxb-resize" /></a>
              <p class="kxb-textcolor-white kxb-font-16">{{ item.title }}</p>
            </div>
          </div>
        </div>
      </div>
      <div id="slide3" class="kxb-content kxb-padding-bottom-1 kxb-padding-top-1">
        <div class="center-div">
          <h3 class="kxb-h4 kxb-textcolor-white kxb-margin-bottom-0">特色板块</h3>
          <h3 class="kxb-h4 kxb-textcolor-white kxb-margin-top-0">Conference Board</h3>

          <a :href="features[0].url"
            ><img :src="features[0].imgUrl" class="kxb-resize"
          /></a>
          <p
            v-if="features[0].title"
            class="kxb-font-16 kxb-textcolor-white kxb-center kxb-margin-top-0"
          >
            {{ features[0].title }}
          </p>
        </div>
      </div>
      <div id="slide4" class="kxb-content kxb-padding-bottom-1 kxb-padding-top-1">
        <div class="center-div">
          <h3 class="kxb-h4 kxb-textcolor-white kxb-margin-bottom-0">特邀嘉宾</h3>
          <h3 class="kxb-h4 kxb-textcolor-white kxb-margin-top-0">Special Guests</h3>
          <div class="kxb-fluid">
            <div class="kxb-col-small-12-6 kxb-center" v-for="i in 10">
              <div class="kxb-padding-content kxb-padding-top-0 kxb-padding-bottom-0">
                <a href="">
                  <img
                    src=""
                    alt=""
                    class="kxb-circle kxb-resize"
                /></a>
              </div>
              <p class="kxb-margin-bottom-0">
                <a
                  href=""
                  class="kxb-textcolor-white"
                  ></a
                >
              </p>
              <p class="kxb-font-12 kxb-margin-top-0 kxb-padding-top-0">
                <a
                  href=""
                  class="kxb-textcolor-white"
                  >大连理工大学</a
                >
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "~api";
export default {
  name: "HelloWorld",
  props: ["bannerImgPC", "_id"],
  data() {
    return {
      clientHeight: 0,
      clientWidth: 0,
      menuHeight: 60, //上面 menu 的高度,menu 高度一旦改变不要忘了调整这里的值
      fullpage: {
        current: 1, // 当前的页面编号
        isScrolling: false, // 是否在滚动,是为了防止滚动多页，需要通过一个变量来控制是否滚动
        deltaY: 0, // 返回鼠标滚轮的垂直滚动量，保存的鼠标滚动事件的deleteY,用来判断是往下还是往上滚
      },
      plate: [],
      features: [{ title: "", url: "", imgUrl: "" }],
    };
  },
  components: {},
  created() {
    this.getInfo();
    this.getFeatures();
  },
  mounted() {
    this.getClientHeight();
    this.getClientWidth();
  },
  methods: {
    getInfo() {
      new Promise((resolve, reject) => {
        api
          .ajaxPost("meeting/findOrganizer", {
            _id: this._id,
          })
          .then((result) => {
            if (result.data.state === "success") {
              this.plate = result.data.data.orgs;
            }
          });
      });
    },
    getFeatures() {
      new Promise((resolve, reject) => {
        api
          .ajaxPost("meeting/findFeature", {
            _id: this._id,
          })
          .then((result) => {
            if (result.data.state === "success") {
              this.features = result.data.data.features;
            }
          });
      });
    },
    getClientHeight() {
      //获取浏览器可视区域高度
      this.clientHeight = `${document.documentElement.clientHeight}`;
      this.clientHeight = this.clientHeight - this.menuHeight;
    },
    getClientWidth() {
      //获取浏览器可视区域宽度
      this.clientWidth = `${document.documentElement.clientWidth}`;
      if (this.clientWidth <= 999) {
        //上面的导航条变成手机版本的了
      }
    },
    next() {
      // 往下切换
      let len = 4; // 页面的个数
      if (this.fullpage.current + 1 <= len) {
        // 如果当前页面编号+1 小于总个数，则可以执行向下滑动
        // this.fullpage.current += 1; // 页面+1
        this.move(this.fullpage.current + 1); // 执行切换
      }
    },
    pre() {
      // 往上切换
      if (this.fullpage.current - 1 > 0) {
        // 如果当前页面编号-1 大于0，则可以执行向下滑动
        // this.fullpage.current -= 1;// 页面+1
        this.move(this.fullpage.current - 1); // 执行切换
      }
    },
    move(index) {
      this.fullpage.isScrolling = true; // 为了防止滚动多页，需要通过一个变量来控制是否滚动
      this.directToMove(index); //执行滚动
      setTimeout(() => {
        //这里的动画是1s执行完，使用setTimeout延迟1s后解锁
        this.fullpage.isScrolling = false;
      }, 1010);
    },
    directToMove(index) {
      let height = this.$refs["fullPage"].clientHeight; //获取屏幕的宽度
      let scrollPage = this.$refs["fullPageContainer"]; // 获取执行tarnsform的元素
      let scrollHeight; // 计算滚动的告诉，是往上滚还往下滚
      scrollHeight = -(index - 1) * height + "px";
      // scrollHeight= -(index - 1) * (this.clientHeight-60) + "px";
      if (this.fullpage.current != index) {
        scrollPage.style.transform = `translateY(${scrollHeight})`;
        this.fullpage.current = index;
        this.$emit("currnet", this.fullpage.current);
      }
    },
    clickToWheel(current, index) {
      if (current != index) {
        let scrollPage = this.$refs["fullPageContainer"];
        let scrollHeight; // 计算滚动的告诉，是往上滚还往下滚
        if (index == 1) {
          scrollHeight = "0px";
        } else {
          scrollHeight = -((index - 1) * this.clientHeight) + "px";
        }
        this.fullpage.current = index;
        this.$emit("currnet", this.fullpage.current);
        scrollPage.style.transform = `translateY(${scrollHeight})`;
      }
    },
    mouseWheelHandle(event) {
      // 监听鼠标监听
      // 添加冒泡阻止
      let evt = event || window.event;
      if (evt.stopPropagation) {
        evt.stopPropagation();
      } else {
        evt.returnValue = false;
      }
      if (this.fullpage.isScrolling) {
        // 判断是否可以滚动
        return false;
      }
      let e = event.originalEvent || event;
      this.fullpage.deltaY = e.deltaY || e.detail; // Firefox使用detail
      if (this.fullpage.deltaY > 0) {
        this.next();
      } else if (this.fullpage.deltaY < 0) {
        this.pre();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.fullPage {
  height: calc(~"100vh - 60px"); //一定要设置，保证占满100%;剪掉头部导航
  overflow: hidden; //一定要设置，多余的先隐藏
  //  background-color: rgb(189, 211, 186);
}
.fullPageContainer {
  width: 100%;
  height: 100%;
  transition: all linear 0.5s;
}
.kxb-slide {
  box-sizing: border-box;
  overflow: hidden;
  .one-div {
    text-align: center;
    img {
      width: 1062px;
      height: 682px;
    }
  }
}
@keyframes likes {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.96);
  }
  to {
    transform: scale(1);
  }
}

.kxb-center-div {
  padding-left: 20%;
  padding-right: 20%;
  height: 100%;
}

#slide1 {
  // background-color: red;
  background: url(http://pics.sciencemate.com/public/upload/files/meeting/202105/othersbg_2021052910415120210530111448.jpg)
    center left/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center; //水平垂直都居中
  .anima {
    animation: likes 6s infinite ease-in-out alternate;
  }
}
#slide2 {
  // background-color: blue;
  background: url(http://pics.sciencemate.com/public/upload/files/meeting/202105/othersbg_2021052910415120210530111448.jpg)
    center left/cover no-repeat;
}
#slide3 {
  // background-color: yellow;
  background: url(http://pics.sciencemate.com/public/upload/files/meeting/202105/othersbg_2021052910415120210530111448.jpg)
    center left/cover no-repeat;
}
#slide4 {
  // background-color: green;
  background: url(http://pics.sciencemate.com/public/upload/files/meeting/202105/othersbg_2021052910415120210530111448.jpg)
    center left/cover no-repeat;
}

.kxb-font-30 {
  font-size: 30px;
}
.mobile {
  background: url(http://pics.sciencemate.com/public/upload/files/meeting/202105/othersbg_2021052910415120210530111448.jpg)
    center left/cover no-repeat;

  .center-div {
    padding-left: 10%;
    padding-right: 10%;
    height: 100%;
  }
}
</style>