首页轮播切换效果demo

最新推荐文章于 2024-07-25 09:37:37 发布

语舞空华

最新推荐文章于 2024-07-25 09:37:37 发布

阅读量71

点赞数

文章标签： vue.js 前端 typescript

本文链接：https://blog.csdn.net/weixin_43805647/article/details/126146345

版权

效果图：

主页面：

<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Mousewheel, Keyboard } from 'swiper'
import { ref } from 'vue'

// Import Swiper styles
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
import Comp from './comp.vue'
const modules = ref([Mousewheel, Keyboard])
const color = ['#ce1111', '#008cff', '#0ab86f', '#d37a07', '#76a30c']
const curSlide = ref(0)
const slideChange = (swiper) => {
  curSlide.value = swiper.activeIndex
}
</script>

<template>
  <div class="head" :class="curSlide !== 0 && 'affix'">头部</div>

  <div class="swiper-home">
    <swiper
      direction="vertical"
      :mousewheel="true"
      :keyboard="{
        enabled: true
      }"
      @slide-change-transition-start="slideChange"
      slides-per-view="auto"
      :modules="modules"
      class="h-swiper"
    >
      <swiper-slide class="m-slide" v-for="(item, i) in color" :key="i">
        <div :style="{ background: item }" class="slide-item">
          <Comp v-show="curSlide === i" />
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<style lang="scss" scoped>
.head {
  background: lightblue;
  text-align: center;
  font-size: 30px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100px;
  width: 100%;
  z-index: 99;
  &.affix {
    background-color: white;
  }
}
.swiper-home {
  width: 100%;
  height: 100%;
}

.h-swiper {
  width: 100%;
  height: 100%;

  .m-slide {
    height: 100%;
    width: 100%;
    .slide-item {
      display: flex;
      font-size: 40px;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }

    &:last-child {
      height: 200px !important;
    }
  }
}
</style>

comp.vue

<script setup lang="ts"></script>

<template>
  <div class="test">fffffff</div>
</template>

<style lang="scss" scoped>
.test {
  animation: fadeinR 1s forwards;
}

@keyframes fadeinR {
  0% {
    opacity: 0;
    transform: translateX(1000px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>