使用vue.js封裝一個包含圖片的跑馬燈組件

初衷：

　　學習完Vuejs后，來准備練習仿寫一下老東家的門戶頁面，主要是為了熟悉一下常用插件的使用，比如video.js，wow.js，swiper等等；而其中涉及到一個包含圖片跑馬燈組件，大概長這樣（從左到右進行輪播　　ps：太懶，沒有截動圖）：

 

 

 歷程：

　　像我這樣的小白，立馬想到的肯定不是自己寫了；於是百度查閱，看有沒有現成的插件之類，搜索到了vue-marquee-tips，但是查看api，自己試用了一下，發現好像只支持純文本，無法滿足需求；

　　查詢插件無果，又想着看一下有沒有人已經寫好了類似的組件，自己可以直接來用的（搜索和研究api就花費了30多分鍾的時間，看來我真的很懶……），查詢到一個無縫銜接的文字跑馬燈，主要是用定時器對字符串進行切割和重新拼接來實現的，雖然代碼實現相對簡單，但對我這樣的小白來說，個人覺得思路是挺不錯的，這里附上鏈接：https://www.cnblogs.com/zhahuhu/p/11592400.html，但是該組件還是只能用於文字，無法滿足需求；

　　終於，我放棄了找現成插件的想法（或許是百度用的不好吧……），准備自己封裝一個跑馬燈組件；

實現思路：

　　之前學習js的時候，使用定時器做過一個輪播圖組件，考慮到跑馬燈應該與之類似，只是定時器設置時間較短而已

　　首先使用一個外層div來包裹住展示區域div，外層div設置overflow：hidden，子絕父相進行定位，再定時改變子div的left，考慮到如果不設置條件判斷，left會一直改變，所以要在left達到某個值時，將left設置回去，這樣就可以實現一直輪播的效果，具體代碼如下：

<template>
  <div class="marquee">
    <div class="marquee-content" @mouseover="clearTimer" @mouseout='startTimer'>
      <div class="img-item" v-for="(item,index) in imglists" :key="index">
        <img :src="item" alt="">
        <span>視頻點播</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Marquee",
  components: {
  },
  data() {
    return {
      imglists: [],
      timer: ''
    };
  },
  created() {
    for (var i = 1; i < 18; i++) {
      this.imglists.push('http://www.360tianma.com/application/cms/static/images/component'+i+'.png')
    }
    this.imglists.push('http://www.360tianma.com/application/cms/static/images/component1.png')
    // console.log(this.imglists)
  },
  mounted() {
     this.startTimer();
  },
  methods: {
    clearTimer() {
      clearInterval(this.timer)
    },
    startTimer() {
      var content = document.querySelector('.marquee-content');
      this.timer = setInterval(() => {
      var oldleftstr = getComputedStyle(content,null).left
      var oldleft = parseInt(oldleftstr);
      content.style.left = oldleft-1 + 'px'
      if (oldleft <= -2925) {
        content.style.left = 0
      }
    }, 10);
    }
  }


  
};
</script>

<style scoped>
  .marquee {
    width: 1140px;
    height: 80px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    margin-top: 100px;
    padding: 15px;
  }
  .marquee-content {
    width: 4050px;
    position: absolute;
    left: 0;
  }

  .img-item {
    width: 225px;
    height: 80px;
    line-height: 80px;
    float: left;
    text-align: center;
  }
  img {
    width: 50px;
    height: 50px;
  }
</style>

　　注：因為是仿寫，主要練習功能實現，所以上述代碼中的圖片都用for循環來添加成一樣的了

個人總結：

　　上述代碼雖然簡單，而且也存在不少缺陷，但是也為今后解決類似的問題提供一種思路；對於我這樣的小白也算是多一次練習和提升；以后遇到類似的組件，可能會多想到自己來封裝，而非找其他插件；

該仿寫頁面已完成，github：https://github.com/Xiaohuimao/Vue-tianma.git，感興趣的同學可自行查閱（該項目文件組織有點慘不忍睹，還望不要吐槽）