vue.js实现简单轮播图效果
2017-10-10 10:46
1131 查看
学习了vue.js也有一段时间了,做了个小demo来熟悉一下,很常见的demo,-------轮播图,没学vue之前的轮播图用JavaScript或者jquery都非常简单,发现用vue来写也挺有意思的。说下简单的思路,图片的轮播用v-if或者v-show来代替原来的Js滑动,过度效果用transition可简单实现,注意,滑动过程中是能看见两张图的,所以要用两个transition。
(1)先写出整体的框架
<template> <div class="slide-show"> <div class="slide-img"> <transition name="slide-trans" > <img v-if='ifshow' :src='imgArray[nowindex]'> </transition> <transition name="slide-trans-old"> <img v-if="!ifshow" :src="imgArray[nowindex]"> </transition> <ul class="slide-pages"> <li v-for="(item,index) in imgArray"> <span :class="{on :index===nowindex}" @click="goto(index)"></span> </li> </ul> </div> </div> </template>
根据imgArray这个照片的数组渲染小圆点的数量,为span绑定on为小圆点点亮的状态,照片的显示隐藏通过自定义变量ifshow来显示,nowindex则控制轮播对应的照片。
(2)轮播图的数组,如果是本地的图片,而且不放在static文件下的,请用require圈上路径,否则路径会报错。如果是从后台服务器获取的则不需要。
data(){ return{ imgArray: [ require('../../img/item_01.png'), require('../../img/item_02.png'), require('../../img/item_03.png'), require('../../img/item_04.png') ] } }
(3)主要就是通过改变自定义变量nowindex来改变轮播图的状态,要注意滑动的过程是能看见两张图的,所以在goto函数中设置了一个短暂的定时器,让一张显示另一张隐藏,分别加上不同的过度效果。
<script type="text/javascript"> export default { props:{ imgArray:{ type:Array, default:[] } }, data() { return { ifshow:true, nowindex:0, } }, created(){ this.timerun() }, computed:{ nextindex(){ if(this.nowindex === this.imgArray.length -1){ return 0 }else{ return this.nowindex + 1 } } }, methods: { goto(index){ let that = this; this.ifshow = false; setTimeout(function(){ that.ifshow = true; that.nowindex = index; },100) }, timerun(){ let that = this; setInterval(function(){ that.goto(that.nextindex) },2000) } } } </script>
到这里,这个简单的轮播图就到此结束了。
关于vue.js的学习教程,请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- js 实现一个简单的3D轮播效果
- css和js实现最简单的轮播图效果
- js实现简单的轮播效果
- 简单实现js轮播图效果
- html+css+js简单实现图片轮播效果
- 基于vue.js实现图片轮播效果
- 原生JS实现图片轮播与淡入效果的简单实例
- vue.js 组件实现简单分页效果
- 原生JS实现简单的无缝自动轮播效果
- js实现简单轮播效果
- 用vue写一个商城的上货组件(简单易懂版,50行js实现效果)
- 基于vue.js实现图片轮播效果
- JS实现的简单轮播图运动效果示例
- 轮播 纯js,html实现轮播效果
- 简单三步实现banner的轮播效果
- JS实现简单的浮动碰撞效果示例
- js实现select跳转菜单新窗口效果代码分享(超简单)
- vue.js单页面应用实例的简单实现
- js实现楼层效果的简单实例
- js实现点击左右按钮轮播图片效果实例