vue实现图片滚动效果

#vue实现图片滚动效果| 来源: 网络整理| 查看: 265

这次给大家带来vue实现图片滚动效果，vue实现图片滚动效果的注意事项有哪些，下面就是实战案例，一起来看一下。

上次写了一个简单的图片轮播，这个相当于在上面的一些改进。这个组件除了可以进行图片滚动外，也可以嵌入任何内容的标签进行滚动，里面用了slot进行封装。

父：

-----使用子组件传过来的值，封装slot

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

【本文地址】

公司简介

联系我们