vue3 组件篇 Carousel

已于 2023-11-07 14:57:10 修改
阅读量5k 收藏 11
点赞数 7
分类专栏： vue3-dxui 文章标签： vue3 carousel 走马灯
于 2023-11-06 21:52:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/glorydx/article/details/134251405
版权

文章目录


在这里插入图片描述

组件介绍

Carousel（走马灯）是一种常见的前端组件，通常用于展示多个项目（通常是图片或内容块）的轮播效果。它是网页和应用中的常见UI元素之一，通常用于滚动广告、产品展示、图片轮播、新闻滚动等场景。

主要特点和功能：

  1. 图片/内容轮播：Carousel能够以水平或垂直的方式，循环地显示多个项目，使用户能够逐个或自动浏览这些项目。
  2. 自动播放：通常，Carousel支持自动播放功能，允许项目在不需要用户干预的情况下自动切换。
  3. 导航控件：通常，Carousel提供导航控件，如箭头或小圆点，用户可以点击它们来切换到不同的项目。
  4. 响应式设计：现代Carousel组件通常支持响应式设计，可以根据屏幕大小和设备类型进行适应，以确保在不同的屏幕上有良好的显示效果。
  5. 自定义样式：开发人员可以根据项目需求自定义Carousel的外观和样式，包括项目尺寸、过渡效果等。

使用场景：
Carousel组件适用于各种情境，包括但不限于：

  1. 广告轮播：在网站或应用中展示不同的广告内容。
  2. 产品展示：在电子商务网站上展示产品图片和详细信息。
  3. 新闻滚动：用于滚动新闻标题或摘要。
  4. 图片画廊：创建图片画廊或幻灯片展示。
  5. 特色内容展示：用于突出特色文章、功能或信息。

开发思路

直接整无缝轮播，来计算每一次移动的距离，什么是无缝轮播？

<Carousel :carouselItemHeight='300'>
  <CarouselItem> <div class='carousel-item-content'>4</div> </CarouselItem>
  <CarouselItem> <div class='carousel-item-content'>1</div> </CarouselItem>
  <CarouselItem> <div class='carousel-item-content'>2</div> </CarouselItem>
  <CarouselItem> <div class='carousel-item-content'>3</div> </CarouselItem>
  <CarouselItem> <div class='carousel-item-content'>4</div> </CarouselItem>
  <CarouselItem> <div class='carousel-item-content'>1</div> </CarouselItem>
</Carousel>

如上所示，实际展示的轮播内容只有1，2，3，4。但在最前面重复了最后一个，在最后面重复了第一个。
当轮播图移动到最后面1的时候，默默跳转到第二个的1，这样就可以一直往一个方向移动。反向同理，当移动到最前面4的时候，默默移动到倒数第二个4。

在切换位置的时候，用户是没有感知的，这样就可以实现无缝轮播。

在移动的时候最好采用requestAnimationFrame，这样可以让动画更稳定，并且移动变量，通过css3 transform属性来实现，减少动画重排带来的性能问题。

组件安装与使用

需要先安装vue3-dxui

yarn add vue3-dxui

或者

npm install vue3-dxui

全局main.ts中引入css

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'vue3-dxui/dxui/dxui.css'

createApp(App).use(store).use(router).mount('#app')

按需引入，Carousel组件的使用需要配合CarouselItem组件一起。

<script>
import { Carousel, CarouselItem } from 'vue3-dxui'
 
export default {
  components: {
  	Carousel,
  	CarouselItem 
  }
}
</script>

组件代码

Carousel组件代码

<template>
  <div class="carousel-warpper" ref="warpper" @mouseenter="stopAutoPaly" @mouseleave="autoPlay">
    <div
      class="carousel-all-warpper"
      :style="{ width: allWarpperWidth, transform: `translateX(${leftVal}px)` }"
      ref="allWarpper"
    >
      <slot />
    </div>

    <!-- 左箭头 -->
    <button class="carousel-arrow carousel-left-arrow" @click="clickPreItem">
      <Icon class="carousel-icon" iconName="chevron-left" />
    </button>

    <!-- 右箭头 -->
    <button class="carousel-arrow carousel-right-arrow" @click="clickNextItem">
      <Icon class="carousel-icon" iconName="chevron-right" />
    </button>

    <!-- 原点 -->
    <div class="carousel-point" v-if="openDot">
      <span
        class="carousel-point-item"
        :class="index === currentIndex ? 'active' : ''"
        v-for="(item, index) in realCountArray"
        :key="index"
        @click="clickDot(index)"
      ></span>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, SetupContext, computed, onMounted, onBeforeUnmount, provide } from 'vue'
import Icon from '@/components/icon/Icon.vue'

export default {
  name: 'Carousel',
  components: {
    Icon
  },
  props: {
    // 同时展示在视野上carouselItem的数量
    visionCount: {
      type: Number,
      required: false,
      default: 1,
      validator: (value: number) => {
        return value >= 1 && value <= 10
      }
    },
    // 自动播放时，当动画播放后，距离下一次移动的间隔时间,单位ms
    intervalTime: {
      type: Number,
      required: false,
      default: 4000,
      validator: (value: number) => {
        return typeof value === 'number'
      }
    },
    // carousel 播放滚动时的移动速度，数字越大，移动速度越快
    transitionSpeed: {
      type: Number,
      required: false,
      default: 6,
      validator: (value: number) => {
        return typeof value === 'number'
      }
    },
    // 轮播里面内容的间隔距离，单位px
    gap: {
      type: Number,
      required: false,
      default: 16,
      validator: (value: number) => {
        return typeof value === 'number'
      }
    },
    // 轮播的内容数量
    count: {
      type: Number,
      required: false,
      default: 0,
      validator: (value: number) => {
        return typeof value === 'number'
      }
    },
    // 定义carouselItem的高度
    carouselItemHeight: {
      type: Number,
      required: false,
      default: 150,
      validator: (value: number) => {
        return typeof value === 'number'
      }
    },
    // 是否开启自动播放
    openAutoPlay: {
      type: Boolean,
      required: false,
      default: true,
      validator: (value: boolean) => {
        return typeof value === 'boolean'
      }
    },
    // 是否开启自动播放
    openDot: {
      type: Boolean,
      required: false,
      default: true,
      validator: (value: boolean) => {
        return typeof value === 'boolean'
      }
    }
  },
  setup(props: any, context: SetupContext) {
    // 整个轮播盒子的宽度
    const allWarpperWidth = ref<string>('')
    // 向左移动的距离
    const leftVal = ref<number>(0)
    // 初始左移距离
    const initLeftVal = ref<number>(0)
    // 已经移动过几次
    const showIndex = ref<number>(0)
    // 监测自动播放是否开启的关键，自动播放的定时器
    const autoPlayInterval = ref<number | null>(null)
    // 除去无缝轮播后，轮播的真实数量
    const realCount = ref<number>(0)
    // 真实的carouselItem的数量，包含无缝轮播新增的内容
    const itemLength = ref<number>(0)
    // 单个item计算后的宽度
    const itemWidth = ref<number>(0)
    // 动画是否正在进行中，其它控制会失效
    const transitionIng = ref<boolean>(false)

    const allWarpper: any = ref(null)
    const warpper: any = ref(null)

    const realCountArray = computed(() => new Array(realCount.value))

    // 当前激活的圆点是第几个
    const currentIndex = computed(() => {
      const result = showIndex.value - props.visionCount
      if (result >= 0 && result <= realCount.value - 1) {
        return result
      } else if (result < 0) {
        return realCount.value + result
      } else {
        return result - realCount.value
      }
    })

    const getItemLength = () => {
      const children = allWarpper.value.children
      realCount.value = children?.length - 2 * props.visionCount
      itemLength.value = props.count || children?.length
      return props.count || children?.length
    }

    const getWarpperWidth = () => {
      return warpper?.value?.clientWidth
    }

    // 计算单个carouselItem的宽度
    const getItemWidth = () => {
      // 减掉间距后除以展示个数
      const carouselItemWidth: number =
        (getWarpperWidth() - props.gap * (props.visionCount - 1)) / props.visionCount
      itemWidth.value = carouselItemWidth
      return carouselItemWidth
    }

    // 计算整个carousel的宽度
    const getAllCarouselWidth = () => {
      return itemWidth.value * itemLength.value + props.gap * (itemLength.value - 1)
    }

    // 动画移动函数
    const RequestAnimationFrameFun = () => {
      if (leftVal.value >= -(itemWidth.value + props.gap) * (showIndex.value + 1)) {
        leftVal.value -= props.transitionSpeed
        requestAnimationFrame(RequestAnimationFrameFun)
      } else {
        showIndex.value += 1
        leftVal.value = -(itemWidth.value + props.gap) * showIndex.value
        // 动画结束
        transitionIng.value = false
      }
    }

    // 下一个item
    const nextCarouselItem = () => {
      // 如果已经移动到最后，返回表面上的第一个
      if (
        leftVal.value <=
        -(itemWidth.value + props.gap) * (itemLength.value - props.visionCount)
      ) {
        leftVal.value = initLeftVal.value
        showIndex.value = props.visionCount
      }

      requestAnimationFrame(RequestAnimationFrameFun)
      // 动画开始
      transitionIng.value = true
    }

    // 自动开始走轮播 初次加载，移出当前dom，返回页面需要重启自动轮播
    const autoPlay = () => {
      if (props.openAutoPlay) {
        // 动画过程需要的时间，动画最长时间一般是60帧/秒，每帧大约16.6ms
        const transitionTime = ((itemWidth.value + props.gap) / props.transitionSpeed) * 16.6

        if (!autoPlayInterval.value) {
          autoPlayInterval.value = window.setInterval(() => {
            nextCarouselItem()
          }, transitionTime + props.intervalTime)
        }
      }
    }

    // 清除自动轮播（点击左右按钮，移入目标dom,离开当前页面，都需要清除dom）
    const stopAutoPaly = () => {
      if (autoPlayInterval.value) {
        clearInterval(autoPlayInterval.value)
      }
      autoPlayInterval.value = null
    }

    // 点击下一个轮播item
    const clickNextItem = () => {
      const handleClickNextItem = () => {
        // 暂停自动轮播
        stopAutoPaly()
        nextCarouselItem()
      }
      // 某种意义上的节流
      if (!transitionIng.value) {
        handleClickNextItem()
      }
    }

    // 点击返回前一个轮播需要执行的动画
    const RequestAnimationFrameFunPre = () => {
      if (leftVal.value <= -(itemWidth.value + props.gap) * (showIndex.value - 1)) {
        leftVal.value += props.transitionSpeed
        requestAnimationFrame(RequestAnimationFrameFunPre)
      } else {
        showIndex.value -= 1
        leftVal.value = -(itemWidth.value + props.gap) * showIndex.value
        // 动画结束
        transitionIng.value = false
      }
    }

    // 点击返回前一个轮播
    const clickPreItem = () => {
      const handleClickPreItem = () => {
        // 暂停自动轮播
        stopAutoPaly()

        // 如果已经移动到最前边，返回表面上的最后一个
        if (leftVal.value >= 0) {
          leftVal.value =
            -(itemWidth.value + props.gap) * (itemLength.value - 2 * props.visionCount)
          showIndex.value = itemLength.value - 2 * props.visionCount
        }

        requestAnimationFrame(RequestAnimationFrameFunPre)
        // 动画开始
        transitionIng.value = true
      }

      // 某种意义上的节流
      if (!transitionIng.value) {
        handleClickPreItem()
      }
    }

    const visibilitychangeHidden = () => {
      if (document.hidden) {
        stopAutoPaly()
      } else {
        autoPlay()
      }
    }

    // 点击跳转圆点移动到对应的距离
    const clickDot = (dotIndex: number) => {
      showIndex.value = dotIndex + props.visionCount
      leftVal.value = -(itemWidth.value + props.gap) * showIndex.value
    }

    onMounted(() => {
      // 初始偏移item的数量
      showIndex.value = props.visionCount

      getItemWidth()
      getItemLength()

      setTimeout(() => {
        allWarpperWidth.value = getAllCarouselWidth() + 'px'
        // 计算初始位置
        initLeftVal.value = leftVal.value = -(itemWidth.value + props.gap) * props.visionCount
      }, 20)

      autoPlay()

      // 如果离开页面停止自动播放页面
      document.addEventListener('visibilitychange', visibilitychangeHidden)
    })

    onBeforeUnmount(() => {
      document.removeEventListener('visibilitychange', visibilitychangeHidden)
    })

    // 提供父组件指定的宽度，避免CarouselItem重新计算
    provide('getItemWidth', getItemWidth)
    provide('gap', props.gap)
    provide('carouselItemHeight', props.carouselItemHeight)

    return {
      autoPlayInterval,
      autoPlay,
      stopAutoPaly,
      showIndex,
      initLeftVal,
      leftVal,
      allWarpperWidth,
      realCountArray,
      allWarpper,
      warpper,
      currentIndex,
      clickNextItem,
      clickPreItem,
      clickDot
    }
  }
}
</script>

<style lang="scss">
@import '@/scss/layout.scss';
.carousel-warpper {
  width: 100%;
  height: 100%;
  min-height: 100px;
  overflow: hidden;
  position: relative;

  .carousel-all-warpper {
    height: 100%;
    white-space: nowrap;
    padding-bottom: 24px;
  }

  .carousel-arrow {
    border-radius: 18px;
    width: 36px;
    height: 36px;
    position: absolute;
    background: $border-color;
    line-height: 36px;
    font-size: 18px;
    color: $black-color;
    padding: 0px;
    border: none;
    cursor: pointer;

    .carousel-icon {
      font-size: 24px;
      line-height: 36px;
      color: $white-color;
    }
  }

  .carousel-left-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-100%);
    left: 24px;
  }

  .carousel-right-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-100%);
    right: 24px;
  }

  .carousel-point {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    .carousel-point-item {
      width: 8px;
      height: 8px;
      border-radius: 4px;
      border: $black-border;
      display: inline-block;
      margin-right: 8px;
      cursor: pointer;
    }
    .carousel-point-item:last-child {
      margin-right: 0;
    }

    .carousel-point-item.active {
      background: $black-color;
    }
  }
}
</style>

carouselItem组件代码

<template>
  <div class="carousel-item-warpper" :style="{ width: itemWidth, marginRight: gap, height: height }">
    <slot />
  </div>
</template>

<script lang="ts">
import {
  ref,
  onMounted,
  inject
} from 'vue'

export default {
  name: 'CarouselItem',
  setup(props: any) {
    // item的 宽度
    const itemWidth = ref<string>('')

    // item 的间距
    const gap = ref<string>('')

    // item的高度
    const height = ref<string>('')

    onMounted(() => {
      const getItemWidth = inject('getItemWidth') as any
      itemWidth.value = getItemWidth() + 'px'
      gap.value = inject('gap') + 'px'
      height.value = inject('carouselItemHeight') + 'px'
    })
    return {
      gap,
      itemWidth,
      height
    }
  }
}
</script>

<style lang="scss">
@import '@/scss/layout.scss';
.carousel-item-warpper {
  height: 100%;
  display: inline-block;
  white-space: initial;
  color: $black-color;
}

.carousel-item-warpper:last-child {
  margin-right: 0px !important;
}
</style>

参数说明

名称说明
visionCount同时展示的item数量
openAutoPlay是否需要自动播放
openDot是否需要dot
intervalTime轮播间隔时间
transitionSpeed轮播动画的速度
carouselItemHeight轮播高度
gap轮播内容的间隙距离

关于dxui组件库

dxui组件库是我个人搭建的vue3 前端交互组件库，倾向于pc网站的交互模式。

  1. 如果你有任何问题，请在博客下方评论留言，我尽可能24小时内回复。
  2. dxui新上线的官网域名变更 http://dxui.cn
  3. npm 官方链接 https://www.npmjs.com/package/vue3-dxui
  4. 如果你想看完整源码 https://github.com/757363985/dxui
    在这里插入图片描述
Vue2原先轮播图组件 Carousel组件 slide组件
05-30
Vue2原生始轮播图组件，支持宽度自适应、高度设置、轮播时间设置、左右箭头按钮控制，圆点按钮切换，以及箭头、圆点按钮是否显示。 <v-carousel :slideData="slideData" :height="450" :begin="0" :interval="3000" :dot="true" :arrow="true"></v-carousel>
vue-split-carousel:vue的轮播组件，同时显示多个轮播项目
04-19
Vue的轮播组件，同时显示多个轮播项目。 2.x作为最新版本仅支持vue 3，vue 2应该使用1.x版本。 浏览器兼容性 现代浏览器，遵循vue 3兼容性。 > 1% last 2 versions not ie 11 not dead 组件结构 在使用<split> ，...
Vue3轮播图（Carousel）
热门推荐
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
04-04 1万+
轮播图组件，常用于一组图片或卡片轮播，支持：箭头导航；显示指示点；自动轮播；设置分页指示点位置；垂直切换；移入暂停；自定义过渡效果；自定义滑动动画；自定义样式；总之，功能丰富，简单易用😁😁
vue vue3 走马灯Carousel
最新发布
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
03-26 1424
走马灯实现多张图片轮播展示，element组件的官网有详细介绍。走马灯的图片点击预览需要给图片绑定一个自定义点击事件
Vue3-Carousel 使用教程
gitblog_00279的博客
08-15 629
Vue3-Carousel 使用教程 项目地址:https://gitcode.com/gh_mirrors/vu/vue3-carousel 项目介绍 Vue3-Carousel 是一个为 Vue 3 框架优化的灵活、响应式且高度可定制的轮播组件。它不是其他库的包装，而是专门为 Vue 3 设计的。该组件支持触摸、键盘、鼠标滚轮和导航，具有强大的可访问性结构。此外，它还提供了响应式断点，可以根据...
vue3封装轮播图组件
qq_59737146的博客
08-25 3357
vue3封装轮播图组件
手把手带你开发一个易用又灵活的 Carousel 组件
OpenTiny的博客
05-13 1080
其实组件的很多其他部分也可以外溢出去，包括子组件、内部方法、TypeScript类型等，将这些能力外溢，把自主权交给开发者，可以有效地增加组件的灵活性，让我们设计的组件既是“易用的”，又是“灵活的”，在易用性和灵活性之间取得一定的平衡。点击上一页、下一页，不仅页码会变化，上面的轮播内容也会跟随变化，基础功能已实现，接下来就是完善分页器样式，并增加页码指示器，让 Carousel 组件的功能更加完整。在实现具体的组件功能之前，我们先创建一个空的组件结构，走通组件本地效果预览的流程。
vue-slick:Slick-carousel的Vue组件（http
05-23
注意： slick-carousel官方软件包似乎将jquery用作package.json中的依赖项，尽管将其用作对等依赖项更合适，以避免使用多个版本的jquery的可能性。 注意这一点。 使用webpack您可以使用别名解决此问题。 import ...
vue-owl-carousel猫头鹰传送带2 vue-owl-carousel-猫头鹰传送带2的Vue组件-Vue.js开发
05-27
简介猫头鹰轮播的VueJS包装器。 Owl Carousel是启用触摸的jQuery插件，可让您创建漂亮的响应式轮播滑块。 ...扩展自vue-owl-carousel安装npm i -s vue-owl-carousel或yarn添加vue-owl-carousel用法
用vue写的无缝轮播组件：carousel.vue
04-16
这是我用vue写的无缝轮播组件 carousel.vue ，主要实现了以下几个功能：1，页面载入时自动轮播；2，当鼠标放在图上时停止轮播，鼠标移出时继续轮播；3，点击左侧箭头时，图片向右滑到下一张，点击右侧箭头时，图片向...
使用Vuejs构建的Carousel组件
08-08
使用Vue.js构建的Carousel组件
vue-slick-carousel：:horizontal_traffic_light:真正的SSR的Vue Slick旋转木马，专为:high_voltage:FluxLuxstay
02-05
您可以以vue组件的方式使用它，而不会出现任何差异。 它还可以轻松解决难题，例如自定义箭头/点。 查找有关所有可用功能，并查看其在。 真正的SSR FCP：1920毫秒＆LCP：3090毫秒 FCP：620ms＆LCP：1850ms
css轮播图_轻量级 Vue+css3 轮播图组件Vue-Snap
weixin_39851872的博客
11-29 318
好东西，都值得被分享！这次给小伙伴们分享一个超强的css3属性 CSS Scroll Snap 实现轮播图功能。vue-snap 基于 CSS Scroll Snap 实现轻量级轮播图组件。支持单个/多个滚动，不规则大小滚动及懒加载滚动，适配移动端。特性轻量级(比其他libs轻5-10倍)没有计算或复杂的逻辑(性能)大部分功能仅需css就可实现自由设置需要显示的轮播图数量完全自适应CSS Scro...
Vue3-Carousel 安装与配置完全指南
gitblog_07557的博客
09-13 723
Vue3-Carousel 安装与配置完全指南 vue3-carousel Vue 3 carousel component 项目地址: https://gitcode.com/gh_mirrors/vu/vue3-carouse...
Vue3-Carousel 搭建与配置指南
gitblog_00339的博客
08-15 482
Vue3-Carousel 搭建与配置指南 项目地址:https://gitcode.com/gh_mirrors/vu/vue3-carousel 1. 项目目录结构及介绍 Vue3-Carousel 的源码目录结构如下： . ├── CHANGELOG.md # 更新日志 ├── LICENSE # 开源许可证（MIT） ├── README.md ...
Vue3轮播图的实现：vue3-carousel的使用和配置
xiaolouuuu的博客
01-08 1438
是一个用于 Vue 3 的轻量级、响应式、功能强大的轮播组件。它允许你轻松创建可以滚动的图片或内容滑块。下面是关于如何安装、使用以及配置的一些示例和详细说明。
推荐开源项目：Vue 3 Carousel - 现代轻量级轮播组件
gitblog_00007的博客
05-19 931
推荐开源项目：Vue 3 Carousel - 现代轻量级轮播组件 项目地址:https://gitcode.com/gh_mirrors/vu/vue3-carousel 在寻找一个高性能且易于定制的Vue 3轮播组件吗？那么Vue 3 Carousel值得你的关注。这个现代化的组件库为你的Web应用带来了丰富的功能和流畅的用户体验。 项目介绍 Vue 3 Carousel 是一款专为Vue 3...
Vue3轮播图组件
香梨炒虾米的博客
01-23 1767
Vue3轮播图组件vue3轮播图组件第一步第二步第三步 vue3轮播图组件 第一步 npm i lib-swiper 第二步 import Swiper_UI from 'lib-swipers' const app = createApp(App) app.use(Swiper_UI) 第三步 <carousel :autoplay="true" :duration="3000" :initial="0" :hasDot="true" :hasDirector="true" &g
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

可缺不可滥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值