本文主要包含效果,滚动,图片等相关知识,匿名希望在学习及工作中可以帮助到您
这次给大家带来vue实现图片滚动效果，vue实现图片滚动效果的注意事项有哪些，下面就是实战案例，一起来看一下。
上次写了一个简单的图片轮播，这个相当于在上面的一些改进。这个组件除了可以进行图片滚动外，也可以嵌入任何内容的标签进行滚动，里面用了slot进行封装。
父：
<template>
<p id="app">
<er-carousel-index :typeNumber=2 :pageNumber=3 :timeSpace=2 :duration=2 :isOrNotCircle="true" url="/src/js/index.json" :isOrNotButton=false>
<template scope="props">-----使用子组件传过来的值，封装slot
<p class="articleList-box-photo ">
<p class="tu imageEffectsAnimate imageEffects_Magnifier">
<a>
<img class="minMax" :src="props.item.img">
</a>
</p>
</p>
<p class="articleList-box-title">
<p class="title">
<a class="textleft">{{props.item.title}}</a>
</p>
</p>
</template>
</er-carousel-index>
</p>
</template>
<script>
import ErCarouselIndex from './components/carouselIndex/src/carouselIndex.vue'
export default {
name: 'app',
data() {
}
},
components: {
ErCarouselIndex//一定要进行组件声明，不然不能引用子组件
}
}
</script>子组件：
<template>
<p tag="p" class="articleList articleListMod-3 er-carouseindex" name="slide-fade" id="articleList" :style="{height:imgHeight+'px'}" >
<span id="btn1" class="er-carouseindex-left" @mousedown="imgMove('mouseLeft')" @mouseup="cancelMove('left')" v-show="isOrNotButton"></span>
<span id="btn2" class="er-carouseindex-right" @mousedown="imgMove('mouseRight')" @mouseup="cancelMove('right')" v-show="isOrNotButton"></span>
<p id="packageAll" class="er-carouseindex-con" @mouseover="clearAuto" @mouseout="slideAuto">
<p class="er-carouseindex-bar" v-show="isOrNotCircle">
<p v-for="(item,dex) in imgList" @mouseup="clearAuto" class="er-carouseindex-circle" @click="circleClick(dex)" :class="{circleSelected:dex===indexCircle}">
</p>
</p>
<p id="imageAll" class="er-carouseindex-item" :style="{transform:translateX,transition:transFlag?transitionTime:''}">
<p class="articleList-box er-carouseindex-box" v-for="(list,index) in imgLisShow" :style="{width:imgWidth+'%'}"
style="max-height:50%;">
<slot :item="list"></slot>
</p>
</p>
</p>
</p>
</template>
<script>
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();
});
}
}
</script>这个组件相对来说功能比较完整，用户可以通过传参来控制当前页面需要显示几张图片，图片滚动时间间隔，是否显示左右点击按钮等等，详细参数可以查看props,里面都有注释。
相信看了本文案例你已经掌握了方法，更多精彩请关注微课江湖其它相关文章！
推荐阅读：
web端的应用实现后退强制刷新
Vue.directive的自定义指令详解
以上就是vue实现图片滚动效果的详细内容，更多请关注微课江湖其它相关文章！