好资源导航 » 文章资讯 » vue.js实现简单轮播图效果

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

2023-09-23 13:08:05 53

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

（1）先写出整体的框架

根据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函数中设置了一个短暂的定时器，让一张显示另一张隐藏，分别加上不同的过度效果。


exportdefault{
props:{
imgArray:{
type:Array,
default:[]
}
},
data(){
return{
ifshow:true,
nowindex:0,
}
},
created(){
this.timerun()
},
computed:{
nextindex(){
if(this.nowindex===this.imgArray.length-1){
return0
}else{
returnthis.nowindex+1
}
}
},
methods:{
goto(index){
letthat=this;
this.ifshow=false;
setTimeout(function(){
that.ifshow=true;
that.nowindex=index;
},100)

},
timerun(){
letthat=this;
setInterval(function(){
that.goto(that.nextindex)
},2000)
}
}
}

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

关于vue.js的学习教程，请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐