YFYC2-H5/src/view/home/index.vue

<script setup lang="ts">
import imageList from "@/data/home/index";
import { useHome } from "@/store/Home/index";
import Tabbar from "@/components/Tabbar.vue";
import { baseURL } from "@/assets/data/Model";
import { setActivePinia } from "pinia";

const store = useHome();
const animageList = ref([] as any);
const getAssetURL = (image: string) => {
  return new URL(`../../assets/img/home/${image}`, import.meta.url).href;
};

const baseImageUrl = computed(() => {
  return baseURL + "/image/home/";
});

const images = ref([] as any);

const imageOver = ref(false);
const prestrainLoading = () => {
  const promises = [] as any;
  for (let i = 0; i < 45; i += 1) {
    new Promise((resolve: any) => {
      const image = new Image();
      image.src = `image/home/animation/${i}.png`;
      image.onload = () => {
        images[i] = image;
        resolve();
      };
    });
  }
  Promise.all(promises).then(() => {
    // console.log("加载完毕");
    imageOver.value = true;
  });
};

const viewTop = ref("");
const viewLeft = ref("");

const startY = ref();
const startX = ref();

const position = ref(-55);
const transformLeft = ref(`translate3d(-230px, 0, 0)`);

// 手指滑动
const touchMove = (event: any) => {
  const dowmImage = document.getElementById("downImg");
  // console.log(dowmImage!.offsetWidth);
  const vw = window.innerWidth / 100;
  let moveEndX = event.changedTouches[0].pageX;
  let X = moveEndX - startX.value; //如果值为正,则代表手指右滑,反则则为左滑,为0则表示点击
  // console.log(X, position.value);
  if (X > 0) {
    if (position.value < 0) {
      position.value += 10;
      transformLeft.value = `translate3d(${position.value}px, 0, 0)`;
    }
  } else if (X < 0) {
    if (position.value > -(dowmImage!.offsetWidth - 60 * vw)) {
      position.value -= 10;
      transformLeft.value = `translate3d(${position.value}px, 0, 0)`;
    }
  }
};

// 开始滑动
const handletouchstart = (event: any) => {
  startX.value = event.changedTouches[0].pageX;
  startY.value = event.changedTouches[0].pageY;
};

const downImageShow = ref(false);
const upImageShow = ref(false);
const textImageShow = ref(false);

store.$subscribe((mutation: any, state: any) => {
  // // console.log("当前需要滚动滚动条", imageList, state.currentIndex);
  downImageShow.value = false;
  // position.value = imageList[state.currentIndex].left
  // transformLeft.value = `translate3d(${position.value}%, 0, 0)`;
  // // 实现滚动条居中
  // const downImage = document.querySelector("#downImg");
  // 加载底层图片
  var img = new Image();
  img.src = baseImageUrl.value + imageList[state.currentIndex].downCoverageURL;
  img.onload = () => {
    // 建筑图片加载完成后执行
    downImageShow.value = true;
    setTimeout(() => {
      const dowmImage = document.getElementById("downImg");
      // console.log(dowmImage!.offsetWidth);
      const imageavg = dowmImage!.offsetWidth / 2;
      const viewavg = window.innerWidth / 2;
      const vw = window.innerWidth / 100;
      // console.log(imageavg, viewavg, vw);
      position.value = Math.floor(-(imageavg + vw * 30 - viewavg));
      // position.value = Math.floor(-(dowmImage!.offsetWidth - window.innerWidth) / 2);
      // position.value = imageList[state.currentIndex].left
      transformLeft.value = `translate3d(${position.value}px, 0, 0)`;
    });
  };

  if (imageList[state.currentIndex].upCoverageURL != "img-up3.png") {
    // 加载上层图片
    var imgUp = new Image();
    imgUp.src =
      baseImageUrl.value + imageList[state.currentIndex].upCoverageURL;
    imgUp.onload = () => {
      // 上层图片加载完成后执行
      upImageShow.value = true;
    };
  } else {
    upImageShow.value = true;
  }

  // 加载文字层图片
  var imgText = new Image();
  imgText.src = baseImageUrl.value + `text.png`;
  imgText.onload = () => {
    // 上层图片加载完成后执行
    textImageShow.value = true;
  };

  // if (imageList[state.currentIndex].upCoverageURL == "img-up1.png") {
  // }
});

onMounted(() => {
  prestrainLoading();
  // 取出数据存到仓库（后期接口获取数据存到仓库）
  store.setBackgroundImages(imageList);
  store.setCurrentIndex(0);
  // animageList.value = import.meta.glob("/public/imgs/*.*", { eager: true });
});
</script>

<template>
  <div class="home" id="homeid" v-if="imageOver">
    <img
      v-show="textImageShow"
      class="text-coverage"
      :src="baseImageUrl + `text.png`"
      alt=""
    />

    <!-- <img
      
      class="up-box"
      :src="store.currentIndex > 3 ? baseImageUrl + 'img-up1.png' : baseImageUrl + 'img-up2.png'"
    /> -->
    <div v-for="(item, index) in imageList" :key="index" class="home-item">
      <div
        id="animation"
        class="up-box"
        v-if="
          index === store.currentIndex && item.upCoverageURL == 'img-up3.png'
        "
      ></div>
      <img
        v-if="
          index === store.currentIndex && item.upCoverageURL != 'img-up3.png'
        "
        class="up-box2"
        :src="baseImageUrl + item.upCoverageURL"
        v-show="upImageShow"
      />
      <div
        :class="item.upCoverageURL == 'img-up1.png' ? 'down-boxs' : ''"
        @touchmove="touchMove"
        @touchstart="handletouchstart"
        v-show="downImageShow && upImageShow"
      >
        <img
          id="downImg"
          v-if="index === store.currentIndex"
          :class="
            item.upCoverageURL == 'img-up1.png' ? 'down-box2' : 'down-box'
          "
          :src="baseImageUrl + item.downCoverageURL"
        />
      </div>

      <!-- <transition name="fade">
        <img
          v-if="index === store.currentIndex"
          class="down-box"
          :src="getAssetURL(item.downCoverageURL)"
        />
      </transition> -->
    </div>
  </div>
  <Tabbar />
</template>

<style lang="scss" scoped>
/* 设置滚动条宽度 */
::-webkit-scrollbar {
  width: 10px;
}

/* 设置滚动条轨道样式 */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

$imgCount: 44;

.home {
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;

  // text-align: center;
  // display: flex;
  // justify-content: center;
  .home-item {
    .up-box2 {
      width: 100vw;
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
      object-fit: cover;
      position: fixed;
      z-index: 2;
      pointer-events: none;
      margin: auto;
    }

    .up-box {
      width: 100vw;
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
      object-fit: cover;
      position: absolute;
      z-index: 2;
      background-size: 100vw calc(var(--vh, 1vh) * 100);
      background-position: 0 -1rem;
      animation: sequence 4s forwards;
    }

    @keyframes sequence {
      @for $i from 1 through $imgCount {
        #{calc($i * 100%/$imgCount)} {
          // background-image: v-bind('animageList');
          background-image: url(/image/home/animation/#{$i}.png);
        }
      }
    }

    // .down-box {
    //   max-width: 100vw;
    //   height: 100vh;
    //   height: calc(var(--vh, 1vh) * 100);
    //   object-fit: cover;
    //   // position: absolute;
    //   z-index: 1;
    //   animation-name: fadenum;
    //   animation-duration: 4s;
    //   animation-fill-mode: forwards;
    // }

    .down-box {
      width: auto;
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
      // object-fit: cover;
      // position: absolute;
      z-index: 1;
      animation-name: fadenum;
      animation-duration: 4s;
      animation-fill-mode: forwards;
    }

    .down-boxs {
      transform: v-bind(transformLeft);
    }

    .down-box2 {
      width: auto;
      height: 70vh;
      height: calc(var(--vh, 1vh) * 70 - 70px);
      margin-top: 30vh;
      margin-left: 30vw;
      margin-right: 30vw;
      // object-fit: cover;
      // position: absolute;
      z-index: 1;
      animation-name: fadenum;
      animation-duration: 4s;
      animation-fill-mode: forwards;
      // clip: rect(40px 40px 40px 40px)
    }

    @keyframes fadenum {
      from {
        transform: scale(1.05);
        /*放大1.1倍*/
        object-fit: cover;
        opacity: 0.5;
      }

      to {
        transform: scale(1.17);
        /*放大1.1倍*/
        object-fit: cover;
        opacity: 1;
      }
    }

    @keyframes fadenumOut {
      from {
        transform: scale(1.05);
        /*放大1.1倍*/
        object-fit: cover;
        opacity: 1;
      }

      to {
        transform: scale(1.17);
        /*放大1.1倍*/
        object-fit: cover;
        opacity: 0.5;
      }
    }
  }

  .text-coverage {
    width: 75%;
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translateX(-50%);
    z-index: 3;
  }
}
</style>