用vue写轮子的一些心得（五）—

需求分析

Slides组件通常包括一下功能：
可支持自动播放
可设置自动播放时间
轮播图片高宽可自适应
支持触屏滑动轮播
可无缝轮播

方法实现

1、定义组件：

在html中定义

t-slides组件定义为最外层轮播图包裹器，t-slides-item组件包裹每张轮播图片，并且每个t-slides-item组件都声明一个name，用以标识每张图片。

<t-slides class="wrapper":autoPlay="autoPlay":selected.sync="selected"><t-slides-item name="1"><div class="box">1</div></t-slides-item><t-slides-item name="2"><div class="box">2</div></t-slides-item><t-slides-item name="3"><div class="box">3</div></t-slides-item>
</t-slides>

2、基础功能逻辑：

t-slides单文件组件中的template模板声明相应鼠标、touch事件。并声明一个solt插槽用以接收t-slides-item组件数据，这些数据在我们做轮播动画的时候会用到，稍后我们再聊它们。

t-slides-dots类里面的内容为左右点击切换与显示轮播图下标圆点相关功能。

<template><div @mouseenter="onMouseEnter"@mouseleave="onMouseLeave"@touchend="onTouchEnd"@touchstart="onTouchStart"class="t-slides"><div class="t-slides-window" ref="window"><div class="t-slides-wrapper"><slot></slot></div></div><div class="t-slides-dots"><span @click="onClickPrev" data-action="prev"><t-icon name="left"></t-icon></span><span v-for="n in childrenLength" :class="{active: selectedIndex === n-1}":key="n" :data-index="n-1"@click="select(n-1)">{{n}}</span><span @click="onClickNext" data-aciton="next"><t-icon name="right"></t-icon></span></div></div>
</template>

通过计算属性找到this.$children名字等于t-sildes-item的组件数量，这样就等于获取到了图片的数量，从而可执行与数量相关的逻辑。

computed: {items() {return this.$children.filter(vm=>vm.$options.name === 't-sildes-item')}
},

3、自动轮播逻辑：

定义一个方法，用setTimeout模拟setInterval并给setTimeout一个id，在页面生命周期销毁前或者任何时候关掉它，这样可减少性能消耗。有了这个方法自动轮播就很简单了，mounted的时候执行一下。

playAutomatically() {if (this.timeId) {return}let run = () => {let index = this.names.indexOf(this.getSelected())let newIndex = index + 1this.select(newIndex) //告诉外界选中的 newIndexthis.timeId = setTimeout(run, this.autoPlayDelay) //this.autoPlayDelay 时间间隔}this.timeId = setTimeout(run, this.autoPlayDelay)
},

4、touch模拟滑动逻辑：

定义touch开始事件结束事件，拿到touch数组的第一项（第一个手指），取出XY轴坐标。用Math算出开始横坐标与结束横坐标的角度(三角函数最小边不超过斜边的2倍)，则角度不会大于30°，角度不大于30°，我们就可以理解用户是在执行滑动操作。

onTouchEnd(e) {let endTouch = e.changedTouches[0]let {clientX: x1, clientY: y1} = this.startTouchlet {clientX: x2, clientY: y2} = endTouchlet distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))let deltaY = Math.abs(y2 - y1)let rate = distance / deltaYif (rate > 2) {if (x2 > x1) {this.select(this.selectedIndex - 1)} else {this.select(this.selectedIndex + 1)}}this.$nextTick(()=> {this.playAutomatically()})
},

5、t-slides-item组件无缝轮播相关css：

通过animationEnabled变量控制轮播始终保持2种状态：1、当前状态 2、离开状态。

当前状态执行当前状态的样式类，离开状态执行另一种样式类。这样我们只需要定义两种样式类即可做出向左向右的任意动效样式。

6、轮播图片高宽可自适应：

只需要在当前状态类.slide-leave-active中定义position: absolute; width：100%; height: 100%;

其中微妙可自行琢磨。

<template v-if="animationEnabled"><transition name="slide"><div class="t-slides-item" v-if="visible" :class="{reverse}"><slot></slot></div></transition>
</template>
<template v-else><div class="t-slides-item" v-if="visible" :class="{reverse}"><slot></slot></div>
</template>

<style lang="scss" scoped>.slide-leave-active {position: absolute;left: 0;top: 0;width: 100%;height: 100%;}.slide-enter-active, .slide-leave-active {transition: all 0.5s;}.slide-enter {transform: translateX(100%);}.slide-enter.reverse {transform: translateX(-100%);}.slide-leave-to {transform: translateX(-100%);}.slide-leave-to.reverse {transform: translateX(100%);}</style>

用vue写轮子的一些心得（五）——Slides轮播组件相关推荐

造轮子之图片轮播组件(swiper)
图片轮播是种很常见的场景和功能,一般移动网站首页的轮播 banner,商品详情页的商品图片等位置都会用到此功能像这种常用的场景功能肯定是有人早就写好插件了的,所以遇到这种场景,一般都遵循以下三步: ...
vue 实现无限轮播_使用Vue制作图片轮播组件思路详解
之前一直都没有认真的写过一个组件.以前在写业务代码的过程中,都是用的别人封装好的组件,这次尝试着写了一个图片轮播组件,虽然比不上知名的轮播组件,但它的功能基本完整,而且在写这个组件的过程中,学的东西也 ...
Vue项目中获取数据后使用swiper轮播，无法轮播且 autoplay 和 loop 失效问题！
Vue项目中获取数据后使用swiper轮播,无法轮播且 autoplay 和 loop 失效问题! 问题表现:轮播组件显示第一张图,可拖动但无法切换到下一张图.但是F12控制台切换屏幕后能正常轮播但无 ...
Vue.js-Day06-PM【项目实战(附带完整项目源码)-day01-pm：轮播组件（使用、安装依赖、具体操作过程）、favicon详细制作】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
vue上下轮播组件简单实现
在vue社区里面没有找到特别好的上下轮播插件,基本都是图片的左右播放插件,质量也是参差不齐在实现这个组件之前,先抛出一个问题,如何在vue中实现dom的环形结构? 首先来看轮播组件的思路红色部分: ...
vue实现循环滚动图片（多图片轮播）
效果(循环滚动,可切换方向): 轮播组件BaseSwiper.vue: <template><div class="swiperBox"><img ...
手机端网页制作轮播图html怎么写,原生JS实现移动端web轮播图详解（结合Tween算法造轮子）...
前言相信大家应该都知道,移动端的轮播图是我们比较常见的需求, 我们最快的实现方式往往是使用第三方的代码, 例如 swiper , 但当遇到一些比较复杂的轮播图需求时, 往往是束手无策,不知道怎么改 ...
vue轮播组件--不插电手动粘贴版
概述轮播的原理是每一帧都选出一个当前元素,前一个元素,后一个元素然后排成一行,最后改变这三个元素的translate来触发css3的transition进行动画,当有touch事件的时候,要实时改变 ...
（三）Vue项目——微商城：首页页面，轮播图+九宫格访问按钮
目录首页 1.显示轮播图 2.服务器返回轮播图数据 3安装axios 4从服务器获取数据 5快速访问按钮首页 1.显示轮播图 src\pages\Home.vue <template> ...

用vue写轮子的一些心得（五）——Slides轮播组件

需求分析

方法实现

用vue写轮子的一些心得（五）——Slides轮播组件相关推荐

最新文章

热门文章