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,里面都有注释。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

web端的应用实现后退强制刷新

Vue.directive的自定义指令详解

以上就是vue实现图片滚动效果的详细内容，更多内容请关注技术你好其它相关文章！