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

<template>
  <div ref="fullPageRef" v-loading="loading" class="fullPage">
    <div class="indicator">
      <div
        v-for="idx in 7"
        :id="idx.toString()"
        :key="idx"
        :class="`${indicatorActiveIndex === idx ? 'active' : ''}`"
        class="point"
        @click="handleIndicatorClick(idx)"
      ></div>
    </div>
    <div
      ref="fullPageContainerRef"
      :data-index="state.fullpage.current"
      class="fullPageContainer"
      @mousewheel="mouseWheelHandle"
    >
      <!-- @DOMMouseScroll="mouseWheelHandle" -->
      <div
        v-for="(item, $index) in state.boxList"
        :key="$index"
        :style="`z-index: ${item.zIndex};`"
        class="section"
      >
        <!-- v-if="`index${state.fullpage.current}` == item.title" -->
        <component
          :is="item.comp"
          v-if="Math.abs(state.fullpage.current - ($index + 1)) <= 1"
          :map-index="mapIndex"
          @changeMapIndex="mapIndex = $event"
        ></component>
      </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>
import { computed, onMounted, reactive, ref, shallowRef } from "vue";
import index0 from "./comp/index0.vue";
import index1 from "./comp/index1.vue";
import index8 from "./comp/index8.vue";
import index9 from "@/views/website/home/comp/index9.vue";

const loading = ref(true);
setTimeout(() => {
  loading.value = false;
}, 500);
const fullPageRef = ref();
const fullPageContainerRef = ref();
const mapIndex = ref(0); // 0-3
const mapRef = ref();
onMounted(() => {
  fullPageContainerRef.value.addEventListener(
    "DOMMouseScroll",
    mouseWheelHandle
  );
});
// onUnmounted(() => {
//   fullPageContainerRef.value.clearEventListener(
//     "DOMMouseScroll",
//     mouseWheelHandle
//   );
//   console.log("cleard");
// });
const len = computed(() => state.boxList.length);
// const len = ref(6);

const next = () => {
  // 往下切换
  // TODO:
  // let len = 6; // 页面的个数
  if (state.fullpage.current + 1 <= len.value) {
    // 如果当前页面编号+1 小于总个数，则可以执行向下滑动
    state.fullpage.current += 1; // 页面+1
    move(state.fullpage.current); // 执行切换
  }
};
const 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 = fullPageRef.value["clientHeight"]; //获取屏幕的宽度
  // let scrollPage = proxy.$refs["fullPageContainer"]; // 获取执行tarnsform的元素
  let scrollHeight; // 计算滚动的告诉，是往上滚还往下滚
  scrollHeight = -(index - 1) * height + "px";
  fullPageContainerRef.value.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: shallowRef(index1),
      zIndex: 1,
      title: "index1",
    },
    {
      comp: shallowRef(index9),
      zIndex: 1,
      title: "index9",
    },
    {
      comp: shallowRef(index0),
      zIndex: 1,
      title: "index1",
    },
    {
      comp: shallowRef(index8),
      zIndex: 1,
      title: "index8",
    },
  ],
  animate: {
    in: "animate__animated animate__fadeInDown",
    out: "animate__animated animate__fadeOutDown",
  },
});

const indicatorActiveIndex = computed(() => {
  if (state.fullpage.current === 1) {
    return 1;
  } else if (state.fullpage.current === 2) {
    return 2;
  } else if (state.fullpage.current === 3) {
    return mapIndex.value + 3;
  } else {
    return state.fullpage.current + 3;
  }
});

// 点击 indicator 时
const handleIndicatorClick = (idx) => {
  console.log(idx);
  let boxIndex;
  let _mapIndex;
  if (idx === 1) {
    boxIndex = 1;
    _mapIndex = null;
  } else if (idx <= 5) {
    boxIndex = 2;
    _mapIndex = idx - 2;
  } else {
    boxIndex = 3;
    _mapIndex = null;
  }

  if (boxIndex > state.fullpage.current) {
    for (let i = state.fullpage.current; i < boxIndex; i++) {
      next();
    }
  } else if (boxIndex < state.fullpage.current) {
    for (let i = state.fullpage.current; i > boxIndex; i--) {
      pre();
    }
  }
  if (_mapIndex !== null && _mapIndex !== mapIndex.value) {
    // mapRef.value?.loadMapByIndex(_mapIndex)
    // console.log(mapRef.value.loadMapByIndex)
    mapIndex.value = _mapIndex;
  }
};
</script>

<style lang="scss" scoped>
.fullPage {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

  .indicator {
    position: absolute;
    top: 50%;
    right: 20px;
    z-index: 999;
    transform: translateY(-50%);

    .point {
      transition: all 1s;
      width: 12px;
      height: 12px;
      background-color: #999;
      border-radius: 50%;

      &.active {
        background-color: #0054ff;
      }

      &:not(:last-child) {
        margin-bottom: 6px;
      }
    }
  }
}

.fullPageContainer {
  width: 100%;
  height: 100%;
  transition: all linear 0.5s;
}

.section {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
</style>