移动端网站开发前端模板/淄博新闻头条最新消息
下面我就为大家分享一篇vue实现图片滚动的示例代码(类似走马灯效果)，具有很好的参考价值，希望对大家有所帮助。
上次写了一个简单的图片轮播，这个相当于在上面的一些改进。这个组件除了可以进行图片滚动外，也可以嵌入任何内容的标签进行滚动，里面用了slot进行封装。
父：
-----使用子组件传过来的值，封装slot
{{props.item.title}}
import ErCarouselIndex from './components/carouselIndex/src/carouselIndex.vue'
export default {
name: 'app',
data() {
}
},
components: {
ErCarouselIndex//一定要进行组件声明，不然不能引用子组件
}
}
子组件：
style="max-height:50%;">
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>
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,里面都有注释。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：