vue實現圖片滾動效果

這次帶給大家vue實現圖片滾動效果，vue實現圖片滾動效果的注意事項有哪些，下面就是實戰案例，一起來看一下。

上次寫了一個簡單的圖片輪播，這個相當於在上面的一些改進。這個組件除了可以進行圖片滾動外，也可以嵌入任何內容的標籤進行滾動，裡面用了slot進行封裝。

父：##

<template>
 <p>
  <er-carousel-index>
   <template>-----使用子组件传过来的值，封装slot
    <p>
     </p>
<p>
      <a>
       <img  class="minMax lazy" src="/static/imghwm/default1.png" data-src="props.item.img" alt="vue實現圖片滾動效果" >
      </a>
     </p>
    </template></er-carousel-index></p>
    <p>
     </p>
<p>
      <a>{{props.item.title}}</a>
     </p>
    
   </template>
  
 

<script>
 import ErCarouselIndex from &#39;./components/carouselIndex/src/carouselIndex.vue&#39;
 export default {
  name: &#39;app&#39;,
  data() {
   }
    },
  components: {
   ErCarouselIndex//一定要进行组件声明，不然不能引用子组件
  }
 }
</script>

#子元件： ##

<template>
 <p>
  <span></span>
  <span></span>
  </p>
<p>
   </p>
<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實現圖片滾動效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！