Hooper API完全手册：掌握所有自定义选项与事件处理 Hooper API完全手册掌握所有自定义选项与事件处理【免费下载链接】hooper A customizable accessible carousel slider optimized for Vue项目地址: https://gitcode.com/gh_mirrors/ho/hooperHooper 是一个为 Vue 优化的可定制无障碍轮播滑块组件提供丰富的 API 选项和事件处理功能。本手册将详细介绍 Hooper 的核心 props、方法、事件及实用示例帮助你快速实现专业级轮播效果。快速上手安装与基础配置要开始使用 Hooper首先需要通过 npm 或 yarn 安装依赖npm install hooper # 或 yarn add hooper基础使用示例template hooper slideslide 1/slide slideslide 2/slide slideslide 3/slide /hooper /template script import { Hooper, Slide } from hooper; import hooper/dist/hooper.css; export default { components: { Hooper, Slide } } /script核心Props定制轮播行为显示与滑动控制Prop默认值描述itemsToShow1每屏显示的项目数量支持小数itemsToSlide1每次滑动的项目数量initialSlide0初始幻灯片索引infiniteScrollfalse启用无限滚动模式centerModefalse启用中心模式突出显示中间幻灯片实战示例多项目显示hooper :itemsToShow3 :itemsToSlide2 slideslide 1/slide slideslide 2/slide slideslide 3/slide slideslide 4/slide slideslide 5/slide /hooper交互与自动播放Prop默认值描述mouseDragtrue启用鼠标拖动touchDragtrue启用触摸拖动wheelControltrue启用鼠标滚轮控制keysControltrue启用键盘控制autoPlayfalse启用自动播放playSpeed2000自动播放间隔毫秒hoverPausetrue鼠标悬停时暂停自动播放实战示例自动播放配置hooper :autoPlaytrue :playSpeed3000 :hoverPausefalse :transition500 slideslide 1/slide slide :duration1500slide 2 (自定义停留时间)/slide slideslide 3/slide /hooper布局与方向Prop默认值描述verticalfalse启用垂直滑动模式rtlnull启用 RTL从右到左模式trimWhiteSpacefalse限制轮播仅在无空白空间时滑动实战示例垂直轮播hooper :verticaltrue styleheight: 400px :itemsToShow1.5 :centerModetrue slideslide 1/slide slideslide 2/slide slideslide 3/slide /hooper实用方法控制轮播行为Hooper 提供多种方法通过 ref 控制轮播基础导航slideTo(index)跳转到指定索引的幻灯片this.$refs.carousel.slideTo(2); // 跳转到第3张幻灯片slideNext()跳转到下一张幻灯片this.$refs.carousel.slideNext();slidePrev()跳转到上一张幻灯片this.$refs.carousel.slidePrev();高级控制update()重新计算轮播尺寸和配置动态添加幻灯片后使用this.$refs.carousel.update();restartTimer()重置自动播放计时器this.$refs.carousel.restartTimer();实战示例自定义控制器template div button clickslidePrev上一张/button input v-modelcurrentSlide typenumber min0 max5 button clickslideNext下一张/button hooper refcarousel slideupdateCurrentSlide slideslide 1/slide slideslide 2/slide slideslide 3/slide /hooper /div /template script export default { data() { return { currentSlide: 0 }; }, methods: { slidePrev() { this.$refs.carousel.slidePrev(); }, slideNext() { this.$refs.carousel.slideNext(); }, updateCurrentSlide(payload) { this.currentSlide payload.currentSlide; } }, watch: { currentSlide(val) { this.$refs.carousel.slideTo(val); } } }; /script事件处理响应轮播状态变化Hooper 提供丰富的事件接口用于监听轮播状态变化滑动事件beforeSlide滑动开始前触发hooper beforeSlidehandleBeforeSlide // 回调参数: { currentSlide, slideTo }slide滑动完成后触发hooper slidehandleSlide // 回调参数: { currentSlide, slideFrom }afterSlide滑动过渡完成后触发hooper afterSlidehandleAfterSlide // 回调参数: { currentSlide }更新事件updated轮播配置更新后触发hooper updatedhandleUpdated // 回调参数: { containerWidth, containerHeight, slideWidth, slideHeight, settings }实战示例进度条实现template div div classprogress-bar :style{ width: progress % }/div hooper refcarousel :autoPlaytrue beforeSlideresetProgress afterSlideresetProgress slideslide 1/slide slideslide 2/slide slideslide 3/slide /hooper /div /template script export default { data() { return { progress: 0, timer: null }; }, methods: { resetProgress() { clearInterval(this.timer); this.progress 0; this.startProgress(); }, startProgress() { this.timer setInterval(() { this.progress 0.5; if (this.progress 100) this.progress 100; }, 10); } }, mounted() { this.startProgress(); }, beforeUnmount() { clearInterval(this.timer); } }; /script style .progress-bar { height: 4px; background: #4CAF50; transition: width 0.1s linear; } /style插槽与Addons扩展轮播功能Hooper 提供灵活的插槽系统用于添加导航、分页等辅助元素默认插槽用于放置幻灯片内容hooper slide第一页内容/slide slide第二页内容/slide /hooperAddons插槽用于添加导航控件、分页指示器等hooper slideslide 1/slide slideslide 2/slide !-- 导航按钮 -- hooper-navigation slothooper-addons/hooper-navigation !-- 进度指示器 -- hooper-progress slothooper-addons/hooper-progress !-- 分页指示器 -- hooper-pagination slothooper-addons/hooper-pagination /hooper内置Addons组件hooper-navigation前后导航按钮hooper-pagination分页指示器支持数字和分数模式hooper-pagination modefraction/hooper-paginationhooper-progress进度条指示器高级技巧动态幻灯片与状态管理动态添加幻灯片template div input v-modelnewSlideText typetext button clickaddSlide添加幻灯片/button hooper refcarousel slide v-for(slide, index) in slides :keyindex {{ slide }} /slide hooper-navigation slothooper-addons/hooper-navigation /hooper /div /template script export default { data() { return { slides: [初始幻灯片 1, 初始幻灯片 2], newSlideText: }; }, methods: { addSlide() { if (this.newSlideText.trim()) { this.slides.push(this.newSlideText); this.newSlideText ; // 通知Hooper更新布局 this.$nextTick(() { this.$refs.carousel.update(); }); } } } }; /script多轮播同步使用group属性同步多个轮播hooper groupgallery :itemsToShow1 !-- 主轮播 -- slide图片 1/slide slide图片 2/slide slide图片 3/slide /hooper hooper groupgallery :itemsToShow3 :centerModetrue !-- 缩略图轮播 -- slide缩略图 1/slide slide缩略图 2/slide slide缩略图 3/slide /hooper状态类自定义样式与动画Hooper 为幻灯片添加了多种状态类可用于自定义样式类名描述.is-active当前可见的幻灯片.is-prev当前幻灯片之前的所有幻灯片.is-next当前幻灯片之后的所有幻灯片.is-current正中央的幻灯片中心模式下.is-clone无限滚动模式下的克隆幻灯片示例中心模式放大效果.hooper-slide { transition: transform 0.3s ease; } .hooper-slide.is-current { transform: scale(1.2); z-index: 10; }完整配置参考所有可用Props完整的Hooper组件配置项可在 docs/api.md 中查看包括transition: 滑动过渡时间毫秒settings: 配置对象批量设置属性group: 轮播组名称用于同步多个轮播方法参考所有可用方法及其参数说明slideTo(index): 跳转到指定索引slideNext(): 下一张slidePrev(): 上一张update(): 更新布局updateWidth(): 重新计算宽度updateBreakpoints(): 更新断点配置restart(): 重启轮播restartTimer(): 重置自动播放计时器总结Hooper 提供了全面的 API 接口和灵活的自定义选项使你能够轻松创建各种轮播效果。无论是简单的图片展示还是复杂的交互式轮播Hooper 的 props、方法和事件系统都能满足你的需求。通过本手册介绍的内容你已经掌握了 Hooper 的核心功能现在可以开始构建自己的定制化轮播组件了要获取更多示例和详细信息请参考项目中的 docs/examples.md 文件。【免费下载链接】hooper A customizable accessible carousel slider optimized for Vue项目地址: https://gitcode.com/gh_mirrors/ho/hooper创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考