使用vue.js实现简单轮播

来源：动视网责编：小采时间：2020-11-27 20:12:15

使用vue.js实现简单轮播

使用vue.js实现简单轮播:学习了vue.js也有一段时间了，做了个小demo来熟悉一下，很常见的demo，-------轮播图，没学vue之前的轮播图用JavaScript或者jquery都非常简单，发现用vue来写也挺有意思的。说下简单的思路，图片的轮播用v-if或者v-show来代替原来的Js滑动，过度效果

推荐度：

点击下载本文 文档为doc格式

导读使用vue.js实现简单轮播:学习了vue.js也有一段时间了，做了个小demo来熟悉一下，很常见的demo，-------轮播图，没学vue之前的轮播图用JavaScript或者jquery都非常简单，发现用vue来写也挺有意思的。说下简单的思路，图片的轮播用v-if或者v-show来代替原来的Js滑动，过度效果

学习了vue.js也有一段时间了，做了个小demo来熟悉一下，很常见的demo，-------轮播图，没学vue之前的轮播图用JavaScript或者jquery都非常简单，发现用vue来写也挺有意思的。说下简单的思路，图片的轮播用v-if或者v-show来代替原来的Js滑动，过度效果用transition可简单实现，注意，滑动过程中是能看见两张图的，所以要用两个transition。

（1）先写出整体的框架

<template>
<p class="slide-show">
<p 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>
</p>
</p>
</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实现简单轮播

推荐度：

点击下载本文 文档为doc格式

标签： VUE 轮播简单

热门焦点

使用vue.js实现简单轮播

使用vue.js实现简单轮播

使用vue.js实现简单轮播

最新推荐

猜你喜欢

热门推荐