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

感謝各位的閱讀！關于vue如何實現圖片滾動效果就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！