vue.js能做轮播图吗?

vue.js能做轮播图吗?答案是:可以。下面本篇文章给大家通过实例介绍一下使用vue.js做轮播图。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

最近新学习了vuejs,尝试着用vuejs写了一个简单的图片轮播,便做个简单的记录

(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.webp'),
require('../../img/item_02.webp'),
require('../../img/item_03.webp'),
require('../../img/item_04.webp')
]
}
}

(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>

到这里,这个简单的轮播图就到此结束了。

更多web前端相关知识,请查阅 HTML中文网 !!

以上就是vue.js能做轮播图吗?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读