这次给大家带来vue实现图片的跑马灯滚动，vue实现图片跑马灯滚动的注意事项有哪些，下面就是实战案例，一起来看一下。
父：
-----使用子组件传过来的值，封装slot
![vue实现图片的跑马灯滚动]()
import ErCarouselIndex from './components/carouselIndex/src/carouselIndex.vue' export default { name: 'app', data() { } }, components: { ErCarouselIndex//一定要进行组件声明，不然不能引用子组件 } }
登录后复制
子组件：
export default { name: "ErCarouselIndex", data(){ return { imgList: [],//请求接口数据 imgLisShow: [],//图片滚动数据，包括左中右三种 timer: null,//自动循环滚动时的间隔时间 timeout:null,//长按时的图片滚动间隔时间 index:0,//图片索引 translateXnum:0,//图片滚动时的偏移量 translateX:"",//生成图片偏移时的表达式 imgWidth:"",//图片所占宽度 timeDown:"",//鼠标刚按下时的时间 timeup:"",//鼠标松开时的时间 clickSpace:"",//鼠标按下松开的时间间隙 transFlag:true,//是否匀速滚动, transitionTime:"", indexCircle:0//小圆圈滚动索引 } }, props:{ duration:0,//图片延时滚动 typeNumber:0, //每次滚动几张 timeSpace:0, //图片滚动时间间隔 url:String,//请求接口地址 pageNumber:0,//当前页面显示几张图片 isOrNotButton:true,//是否显示左右按钮 isOrNotCircle:true,//是否显示小圆圈 imgHeight:""//图片滚动显示高度 }, watch:{ index:{ handler(){ var _this=this; if(Math.abs(this.index)==this.imgList.length){ this.indexCircle=0; setTimeout(function(){ _this.reset(); },_this.duration*1000*0.98); }else{ this.indexCircle=this.index; } this.calcXnum(); } }, translateXnum:{ handler(){ this.translateX="translateX("+this.translateXnum+"%)"; } } }, methods:{ //页面初始化复赋值 imgView:function() { var _this = this; _this.$http.get(_this.url).then(function (res) { _this.imgList = res.data.imgList; for(var i=0;i<3;i++){ _this.imgList.forEach(function (item, index) { _this.imgLisShow.push(item); }); } _this.reset(); _this.slideAuto(); _this.imgWidth=(100/_this.pageNumber)-1; _this.transitionTime="all "+_this.duration*0.98+"s linear"; console.log(_this.transitionTime); }); }, //图片滚动方法(长按) imgMove:function(direct){ var _this = this; _this.timeDown=new Date();//记录按下的时间 _this.timeout = setInterval(function() { if(direct=="mouseLeft") { _this.leftMove(); }else{ _this.rightMove(); } },300); }, //鼠标送开时执行的方法 cancelMove:function(direct){ var _this = this; _this.clearAuto(); this.timeup=new Date();//记录松开的时间 this.clickSpace=this.timeup.getTime() - this.timeDown.getTime(); //时间间隔小于500毫秒为点击，反之为长按 if(this.clickSpace<500){ for(var i=0;i<_this.typeNumber;i++){ if(direct=="left"){ _this.leftMove(); }else{ _this.rightMove(); } } } if (this.timeout) { clearInterval(this.timeout); this.timeout = null; } }, //向左移动 leftMove:function(){ this.index--; this.transFlag=true; }, //向右移动 rightMove:function(){ this.transFlag=true; this.index++; }, slideAuto:function () { var _this = this; _this.timer = setTimeout(function () { if(Math.abs(_this.index)!==_this.imgList.length){ _this.rightMove(); _this.slideAuto(); } }, _this.timeSpace * 1000); }, clearAuto:function () { console.log("停止"); if (this.timer) { clearInterval(this.timer); this.timer = null; } }, //重置 reset:function(){ this.index=0; this.transFlag=false; this.calcXnum(); }, calcXnum:function(){ var _this=this; this.translateXnum=-(this.index+this.imgList.length)*(100/this.pageNumber); }, //点击圆圈跳转图片 circleClick:function(dex){ this.index=dex; this.clearAuto(); } }, mounted() { this.$nextTick(function () { this.imgView(); }); } }
登录后复制
这个组件相对来说功能比较完整，用户可以通过传参来控制当前页面需要显示几张图片，图片滚动时间间隔，是否显示左右点击按钮等等，详细参数可以查看props,里面都有注释。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
Vue组件开发有哪些技巧
axios发送post请求springMVC无法接受参数如何处理
vue+axios在页面切换时中断请求怎么实现
立即学习“前端免费学习笔记（深入）”；
以上就是vue实现图片的跑马灯滚动的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2773477.html
