Vue的轮播图组件实现方法

今天在上慕课老师fishenal的vue实战课程的时候,有一个轮播图组件实现,在跟着做的时候,自己也踩了一些坑。此外,在原课程案例的基础上,我加入了不同方向的滑动功能。

本文章采用Vue结合Css3来实现轮播图。

首先要了解的是Vue的动画原理。在vue中,如果我们要给元素设置动画效果,则需要使用一个<transition name="targetClassName"></transition>将相应的元素包裹住,如下:

<transition name="imgShouldMove">
 <img v-if="shouldShow" src="/1.jpg">
</transition> 

之后,便可以在.imgShoudMove中设置动画属性了,如下:

.imgShouldMove-enter{
 transition: all 0.5s;
}
.imgShouldMove-enter-active{
 transform:translateX(900px);
} 

注意在HTML中,这里<img>有一个v-if="shoudShow"属性。shouldShow这个属性是在data(){}中设置的,当shouldShow从false-->true时(即img从无到突然出现时),Vue动画原理将动画分为了 shouldShouldMove-enter 和 imgShouldMove-enter-active 两个阶段。

我本人对其的理解为,其中 shouldShouldMove-enter 表示动画开始的初始状态, imgShouldMove-enter-active 这表示动画的终止状态。而动画的触发则是通过if-show引起的。

如下图

了解了这些之后,我就可以开始着手实现轮播图组件了。

首先是HTML代码:

<template>
 <div class="carousel" @mouseenter="clearInv()" @mouseleave="runInterval()">
 <div class="imgBox">
 <a :href="pics[currentIndex].href" rel="external nofollow" >
 <transition v-bind:name="'carousel-trans-' + direction + '-old'">
 <!-- isShow: false -> true
 取反后: true -> false(从显示到消失) -->
  <img v-if="!isShow" :src="pics[currentIndex].src">
 </transition>
 <transition v-bind:name="'carousel-trans-' + direction ">
 <!-- isShow: false -> true -->
 <!-- 从消失到显示 -->
  <img v-if="isShow" :src="pics[currentIndex].src">
 </transition>
 </a>
 </div>
 <h2>{{pics[currentIndex].title}}</h2>
 <ul class="pagination">
 <li v-for="(item, index) in pics" @click="goto(index)" :class="{active:index === currentIndex}">{{index + 1}}</li>
 </ul>
 <div class="prevBtn" @click="goto(prevIndex)"><i class="iconfont"></i></div>
 <div class="nextBtn" @click="goto(nextIndex)"><i class="iconfont"></i></div>
 </div>
</template>

Script代码:

<script>
export default {
 props:{
 pics:{
 type:Array,
 default:[]
 },
 timeDelta:{
 type:Number,
 default:2000
 }
 },
 data () {
 return {
 currentIndex:0,
 isShow:true,
 direction:'toleft'
 }
 },
 computed:{
 prevIndex(){
 this.direction = 'toleft'
 if (this.currentIndex <= 0) {
 return this.pics.length - 1
 }
 return this.currentIndex - 1
 },
 nextIndex(){
 this.direction = 'toright'
 if (this.currentIndex >= this.pics.length - 1) {
 return 0
 }
 return this.currentIndex + 1
 }
 },
 methods:{
 goto(index){
 this.isShow = false
 setTimeout(()=>{
 this.isShow = true
 this.currentIndex = index
 },10)

 },
 runInterval(){
 this.direction = 'toright'
 this.timer = setInterval(()=>{
 this.goto(this.nextIndex)
 },this.timeDelta)
 },
 clearInv(){
 clearInterval(this.timer)
 }
 },
 mounted(){
 this.runInterval()
 }
}
</script>

与动画相关的css代码如下

.carousel-trans-toright-enter-active,.carousel-trans-toright-old-leave-active{
 transition:all 0.5s;
}
.carousel-trans-toright-enter{
 transform:translateX(940px); //新图片从右侧940px进入
}
.carousel-trans-toright-old-leave-active{
 transform:translateX(-940px); //老图片向左侧940px出去
}
.carousel-trans-toleft-enter-active,.carousel-trans-toleft-old-leave-active{
 transition:all 0.5s;
}
.carousel-trans-toleft-enter{
 transform:translateX(-940px); //新图片从右侧940px进入
}
.carousel-trans-toleft-old-leave-active{
 transform:translateX(940px); //老图片向左侧940px出去
} 

---------------以下为解释说明-------------

注意:对于<img>需要放在<box>里面,<box>需要设置为position:relative; 而<img>必须设置为position:absolute; 这步非常非常重要,否则每次莫名其妙的总是只有一张图片显示。

在每次切换的时候,都要触发goto()方法,将this.isShow先置false,10毫秒后,this.isShow置true。这时,html中的<transition>被触发,它与css相结合触发动画效果,持续时间为css属性中的transition所定的0.5s。

在向前、向后切换的时候,使用到了计算属性,在div.prevBtn以及div.nextBtn上,我们作了点击事件绑定,触发方法goto(),而传入的正是计算属性prevIndex, @click="goto(prevIndex)"

计算属性的设定方法如下:

computed:{
 prevIndex(){
 //经过一番计算过程得出result
 return result //这个值即<template>中的prevIndex
 }
 }, 

每隔2秒自动滑动时,我们向left滑动,在data中,设定了变量 direction ,它的值要么为字符串'toleft',要么为'toright'。

我们在计算属性中对 this.direction 进行了设置,并在<template>中对相应的name进行了字符串拼接,如下

<transition v-bind:name="'carousel-trans-' + direction "> 

在vue中,除了class和style可以传入对象、数组,其他的属性绑定必须进行字符串拼接。

以上这篇Vue的轮播图组件实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue中如何实现轮播图的示例代码

    这个功能我感觉在任何项目中都会涉及到,今天我就把我的实现方法跟大家分享一下,有不对的地方还请指出,我好更新. 下面是整体代码,我把轮播图单独做了一个组件,大家可以拿来就用,具体代码如下: <template> <div class="content"> <div class="focus"> <!-- focus begin --> <swiper :options="swiperOption"

  • vue.js实现简单轮播图效果

    学习了vue.js也有一段时间了,做了个小demo来熟悉一下,很常见的demo,-------轮播图,没学vue之前的轮播图用JavaScript或者jquery都非常简单,发现用vue来写也挺有意思的.说下简单的思路,图片的轮播用v-if或者v-show来代替原来的Js滑动,过度效果用transition可简单实现,注意,滑动过程中是能看见两张图的,所以要用两个transition. (1)先写出整体的框架 <template> <div class="slide-show&

  • 基于vue.js实现图片轮播效果

    轮播图效果: 1.html <template> <div class="shuffling"> <div class="fouce fl"> <div class="focus"> <ul class="showimg"> <template v-for='sd in shufflingData'> <li v-if='shufflingId==$

  • 利用Vue实现移动端图片轮播组件的方法实例

    前言 轮播图的插件也有很多,用jQuery写起来也不难,这里分享的是关于利用Vue实现移动端图片轮播组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: wc-swiper 基于 Vue 的移动端的图片轮播组件. Why 之前一直在用 vue-awesome-swiper, 功能很齐全, 但是唯一的问题就是体积比较大. 我只是想要一个简单的图片轮播, 但是却要引入 100多k 大小的文件, 这样是不对的. 特点 支持自动播放 & 无限轮播 (loop) 效果 支持用户滑

  • VUE开发一个图片轮播的组件示例代码

    本人刚学习vue,用vue做了个图片轮播,下面我来记录一下,有需要了解VUE开发一个图片轮播的组件的朋友可参考.希望此文章对各位有所帮助. 完成效果图如下: vue开发的思路主要是数据绑定,代码如下: <template> <div ref="root" style="user-select: none;-webkit-user-select: none;overflow: hidden"> <div class="slide

  • 利用vueJs实现图片轮播实例代码

    最近新学习了vuejs,尝试着用vuejs写了一个简单的图片轮播,便做个简单的记录 以下只贴出carousel.vue代码,其他的省略 <template> <div ref="root"> <div class="sliderPanel"> <div v-for="(item,index) in imgArray" class="verticalCenter picbox">

  • Vue的轮播图组件实现方法

    今天在上慕课老师fishenal的vue实战课程的时候,有一个轮播图组件实现,在跟着做的时候,自己也踩了一些坑.此外,在原课程案例的基础上,我加入了不同方向的滑动功能. 本文章采用Vue结合Css3来实现轮播图. 首先要了解的是Vue的动画原理.在vue中,如果我们要给元素设置动画效果,则需要使用一个<transition name="targetClassName"></transition>将相应的元素包裹住,如下: <transition name=

  • vue.js轮播图组件使用方法详解

    之前用jQuery写过轮播组件,用的jquery动画实现的图片滑动效果.这个组件的滑动特效是原生js搭配vue的数据绑定实现的,不依赖其他库,虽然可以再vue.js中引入swiper,但是引入类库的最大的缺点就是冗余代码太多,所以还是自己写一个比较好,简单扼要.(ps:组件的宽高设置还有有点小bug,子组件中需要改为用js动态修改container的宽高,另外可能还有其他地方有不合理之处,欢迎各位批评指正) github地址:git@github.com:cainiao222/vueslider

  • Vue使用Swiper封装轮播图组件的方法详解

    目录 Swiper 为什么要封装组件 开始封装 1.下载安装Swiper 2.引入css样式文件 3.引入js文件 4.把官网使用方法中的HTML结构复制粘贴过来 5.初始化Swiper 自定义效果 完整代码 效果展示 Swiper Swiper是一个很常用的用于实现各种滑动效果的插件,PC端和移动端都能很好的适配. 官网地址:www.swiper.com.cn/ 目前最新版本是Swiper7,但众所周知最新版本通常不稳定,所以这里使用Swiper6来封装. Swiper各版本区别: 为什么要封

  • vue3封装轮播图组件的方法

    目的 封装轮播图组件,直接使用,具体内容如下 大致步骤 准备my-carousel组件基础布局,全局注册 准备home-banner组件,使用my-carousel组件,再首页注册使用. 深度作用选择器覆盖my-carousel组件的默认样式 在home-banner组件获取轮播图数据,传递给my-carousel组件 在my-carousel组件完成渲染 自动播放,暴露自动轮播属性,设置了就自动轮播 如果有自动播放,鼠标进入离开,暂停,开启 指示器切换,上一张,下一张 销毁组件,清理定时器 落

  • UGUI轮播图组件实现方法详解

    本文实例为大家分享了UGUI轮播图组件实现的具体代码,供大家参考,具体内容如下 要用到,于是就自已做了一个,自认为封装上还是OK的,开发于unity5.1.2. 支持自动轮播.手势切换.代码调用切换,支持水平和竖直两个方向以及正负方向轮播,轮播索引改变有回调可以用,也可以获取到当前处于正中的子元素. 要注意的是,向轮播列表中加入新元素不能直接setparent,要调用该组件的AddChild方法 下面是鄙人的代码: /// 主要关注属性.事件及函数: /// public int Current

  • VUE 3D轮播图封装实现方法

    本文为大家分享了VUE 3D轮播图封装的具体代码,供大家参考,具体内容如下 一.体验地址 VUE 3D轮播图 二.实现功能点 (1).无缝轮播 (2).进入变大.离开缩小(类3d切换效果) 三.js代码 <!--轮播图插件模板--> <template> </template> <script type="text/ecmascript-6"> import {swiper, swiperSlide} from 'vue-awesome-

  • 微信小程序swiper轮播图组件使用方法详解

    本文实例为大家分享了微信小程序swiper轮播图组件的使用,供大家参考,具体内容如下 在components中新建文件夹swiper components/swiper/swiper.wxml <!--components/swiper/swiper.wxml--> <view class="container">     <swiper class="swiper-box" bind:change="swiperChange

  • Vue中使用better-scroll实现轮播图组件

    better-scroll 是什么 better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件.它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化. better-scroll 是基于原生 JS 实现的,不依赖任何框架.它编译后的代码大小是 63kb,压缩后是 35kb,gzip 后仅有 9kb,是一款非常轻量的 JS lib. 今天我们利用它实现一个横向

  • android轮播图组件的制作方法

    本文实例为大家分享了android轮播图组件的制作方法,供大家参考,具体内容如下 BannerLayout package com.coral3.common_module.components; import android.content.Context; import android.os.Handler; import android.os.Message; import android.util.AttributeSet; import android.view.LayoutInfla

  • uniapp vue与nvue轮播图 轮播图组件

    vue部分如下: <template> <view class=""> <!-- 轮播图组件 --> <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular=""> <block v-for="(it

随机推荐