循环轮播的简单实现

2023-03-24 20:01| 来源: 网络整理| 查看: 265

使用场景

一般我们开发轮播组件都是使用现成的swipe插件，但是有时候一个比较简单的轮播需求我们用几行代码就可以实现，特别是移动端的项目，这样可以较少资源包的大小。下面让我们一步一步来实现一个垂直轮播标签的简单功能，以下代码示例是用vue2编写的，掌握了实现思路，用任何语言都可以快速实现。

dom结构

首先是dom结构，我们需要一个展示当前轮播项目的容器(swipe)，轮播项的高度和宽度与这个容器的大小一致，这样保证每次只展示一个轮播项。内部嵌套一个包裹轮播项的容器(wrapper)，这个容器是用来做动画轮播的。最后是遍历渲染轮播项（slide），轮播项(.slide)的高度等于swipe的高度，最后一个轮播项是实现循环轮播的关键。

（PS: wrapper的style可以先忽略，看完js部分再理解）

{{ item }} {{ items[0] }} 复制代码样式部分

样式部分比较简单

.dynamic-tag { width: 40px; height: 16px; line-height: 16px; overflow: hidden; background: #f66304; &__list { transition-timing-function: ease-out; /* 可自由选择移动过渡效果 */ &__item { color: #fff; text-align: center; font: bolder 12px/normal PingFangSC-Semibold; } } } 复制代码动画实现

轮播是通过设置wrapper的Y轴偏移实现的，turnToVirtualOne的判断是实现无缝录播的关键

export default { name: 'my-swipe', props: { tags: { type: Array, default: [], require: true }, // 一个标签轮播的时长(包含停顿时长) duration: { type: Number, default: 1800 }, // 一个标签轮播完停顿的时长 pauseDuration: { type: Number, default: 800 } }, data() { return { offsetHeight: 0, // 一个标签的高度 translateY: 0, // 标签容器垂直方向上的偏移 slideDuration: 0 // 标签滑动的过渡时间 } }, mounted() { this.getOffsetHeight() setTimeout(() => { this.start() }, this.pauseDuration) }, methods: { // 根据容器的高度设置每个轮播项的高度 getOffsetHeight() { const { offsetHeight } = this.$refs.container || {} this.offsetHeight = offsetHeight }, start() { const maxTranslateY = this.offsetHeight * this.tags.length const change = () => { this.slideDuration = this.duration - this.pauseDuration this.translateY = this.translateY - this.offsetHeight let turnToVirtualOne = this.translateY === -maxTranslateY // 轮播到第一个轮播的虚拟项位置 if (turnToVirtualOne) { setTimeout(() => { // 轮播结束后去除过渡，马上变换到第一个标签的位置 this.slideDuration = 0 this.translateY = 0 }, this.slideDuration) turnToVirtualOne = false } } change() setInterval(change, this.duration) } } } 复制代码

【本文地址】

循环轮播的简单实现

循环轮播的简单实现

今日新闻

推荐新闻