cas_cloud_web_i18n_old/src/views/website/home/index.vue

<template>
  <div v-loading="loading" class="fullPage" ref="fullPage">
    <div class="fullPageContainer" ref="fullPageContainer">
      <!-- <div
        v-for="(item, $index) in state.boxList"
        class="section"
        :key="$index"
        :style="`z-index: ${item.zIndex};`"
      >
        <component :is="item.comp"></component>
      </div> -->

      <!-- <div class="section"><index1></index1></div>
      <div class="section"><index2 /></div>
      <div class="section"><index3 /></div>
      <div class="section"><index4 /></div>
      <div class="section"><index5 /></div>
      <div class="section"><index6 /></div>
      <div class="section"><index7 /></div>
      <div class="section"><index8 /></div>-->
    </div>
  </div>

  <!-- <div class="home">
    <transition-group
      :enter-active-class="state.animate.in"
      :leave-active-class="state.animate.out"
    >
      <div
        v-for="(item, $index) in state.boxList"
        class="box"
        :key="$index"
        :style="`z-index: ${item.zIndex};`"
        v-show="state.showBox === $index"
      >
        <component :is="item.comp"></component>
      </div>
    </transition-group>
  </div>-->
</template>

<script setup lang="ts">
import { ref } from "vue";
const loading = ref<boolean>(true);

// let state = reactive({
//   fullpage: {
//     current: 1, // 当前的页面编号
//     isScrolling: false, // 是否在滚动,是为了防止滚动多页，需要通过一个变量来控制是否滚动
//     deltaY: 0, // 返回鼠标滚轮的垂直滚动量，保存的鼠标滚动事件的deleteY,用来判断是往下还是往上滚
//   },
//   showBox: 0,
//   boxList: [
//     {
//       comp: index1,
//       zIndex: 1,
//       title: "index1",
//     },
//     {
//       comp: index2,
//       zIndex: 1,
//       title: "index2",
//     },
//     {
//       comp: index3,
//       zIndex: 1,
//       title: "index3",
//     },
//     {
//       comp: index4,
//       zIndex: 1,
//       title: "index4",
//     },
//     {
//       comp: index5,
//       zIndex: 1,
//       title: "index5",
//     },
//     {
//       comp: index6,
//       zIndex: 1,
//       title: "index6",
//     },
//     {
//       comp: index7,
//       zIndex: 1,
//       title: "index7",
//     },
//     {
//       comp: index8,
//       zIndex: 1,
//       title: "index8",
//     },
//   ],
//   animate: {
//     in: "animate__animated animate__fadeInDown",
//     out: "animate__animated animate__fadeOutDown",
//   },
// });
// const mouseWheelHandle = (event) => {
//   // 监听鼠标监听
//   // 添加冒泡阻止
//   let evt = event || window.event;
//   if (evt.stopPropagation) {
//     evt.stopPropagation();
//   } else {
//     evt.returnValue = false;
//   }
//   if (state.fullpage.isScrolling) {
//     // 判断是否可以滚动
//     return false;
//   }
//   let e = event.originalEvent || event;
//   state.fullpage.deltaY = e.deltaY || e.detail; // Firefox使用detail
//   if (state.fullpage.deltaY > 0) {
//     next();
//   } else if (state.fullpage.deltaY < 0) {
//     pre();
//   }
// };
</script>
<!-- <script setup lang="ts">
import { reactive, onMounted, getCurrentInstance, ref } from "vue";
const { proxy } = getCurrentInstance();
import index1 from "./comp/index1.vue";
import index2 from "./comp/index2.vue";
import index3 from "./comp/index3.vue";
import index4 from "./comp/index4.vue";
import index5 from "./comp/index5.vue";
import index6 from "./comp/index6.vue";
import index7 from "./comp/index7.vue";
import index8 from "./comp/index8.vue";

const loading = ref(true);
setTimeout(() => {
  loading.value = false;
}, 1000);

onMounted(() => {});
function next() {
  // 往下切换
  let len = 8; // 页面的个数
  if (state.fullpage.current + 1 <= len) {
    // 如果当前页面编号+1 小于总个数，则可以执行向下滑动
    state.fullpage.current += 1; // 页面+1
    move(state.fullpage.current); // 执行切换
  }
}
function pre() {
  // 往上切换
  if (state.fullpage.current - 1 > 0) {
    // 如果当前页面编号-1 大于0，则可以执行向下滑动
    state.fullpage.current -= 1; // 页面+1
    move(state.fullpage.current); // 执行切换
  }
}
function move(index) {
  state.fullpage.isScrolling = true; // 为了防止滚动多页，需要通过一个变量来控制是否滚动
  directToMove(index); //执行滚动
  setTimeout(() => {
    //这里的动画是1s执行完，使用setTimeout延迟1s后解锁
    state.fullpage.isScrolling = false;
  }, 1010);
}
function directToMove(index) {
  let height = proxy.$refs["fullPage"]["clientHeight"]; //获取屏幕的宽度
  let scrollPage = proxy.$refs["fullPageContainer"]; // 获取执行tarnsform的元素
  let scrollHeight; // 计算滚动的告诉，是往上滚还往下滚
  scrollHeight = -(index - 1) * height + "px";
  scrollPage.style.transform = `translateY(${scrollHeight})`;
  state.fullpage.current = index;
}
function mouseWheelHandle(event) {
  // 监听鼠标监听
  // 添加冒泡阻止
  let evt = event || window.event;
  if (evt.stopPropagation) {
    evt.stopPropagation();
  } else {
    evt.returnValue = false;
  }
  if (state.fullpage.isScrolling) {
    // 判断是否可以滚动
    return false;
  }
  let e = event.originalEvent || event;
  state.fullpage.deltaY = e.deltaY || e.detail; // Firefox使用detail
  if (state.fullpage.deltaY > 0) {
    next();
  } else if (state.fullpage.deltaY < 0) {
    pre();
  }
}

let state = reactive({
  fullpage: {
    current: 1, // 当前的页面编号
    isScrolling: false, // 是否在滚动,是为了防止滚动多页，需要通过一个变量来控制是否滚动
    deltaY: 0, // 返回鼠标滚轮的垂直滚动量，保存的鼠标滚动事件的deleteY,用来判断是往下还是往上滚
  },
  showBox: 0,
  boxList: [
    {
      comp: index1,
      zIndex: 1,
      title: "index1",
    },
    {
      comp: index2,
      zIndex: 1,
      title: "index2",
    },
    {
      comp: index3,
      zIndex: 1,
      title: "index3",
    },
    {
      comp: index4,
      zIndex: 1,
      title: "index4",
    },
    {
      comp: index5,
      zIndex: 1,
      title: "index5",
    },
    {
      comp: index6,
      zIndex: 1,
      title: "index6",
    },
    {
      comp: index7,
      zIndex: 1,
      title: "index7",
    },
    {
      comp: index8,
      zIndex: 1,
      title: "index8",
    },
  ],
  animate: {
    in: "animate__animated animate__fadeInDown",
    out: "animate__animated animate__fadeOutDown",
  },
});
</script> -->

<style lang="scss" scoped>
.fullPage {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.fullPageContainer {
  width: 100%;
  height: 100%;
  transition: all linear 0.5s;
}
.section {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
</style>