vue 公告 之左右滚动

 <template>

  <div class="wrap">

    <ul id="marquee">

      <li v-for="(item,index) in lists" :key="index">{{item}}</li>

    </ul>

  </div>

</template>

<script type="text/ecmascript-6">

export default {

  name: "Scroller",

  props: ["lists"], // 父组件传入数据， 数组形式

  methods: {

    move() {

      // 获取内容区宽度

      let width = document.getElementById("marquee").scrollWidth;

      let marquee = document.getElementById("marquee");

      let speed = 10; // 位移距离

      // 设置位移

      setInterval(function() {

        speed = speed - 1;

        // 如果位移超过文字宽度，则回到起点

        if (-speed >= width) {

          speed = 500;

        }

        marquee.style.transform = "translateX(" + speed + "px)";

      }, 40);

    }

  },

  mounted: function() {

    this.move();

  }

};

</script>

 <style scoped>

/*样式的话可以写*/

.wrap {

  overflow: hidden;

  color: red;

}

#box {

  height: 100%;

}

ul,

li {

  margin: 0;

  padding: 0;

}

ul {

  white-space: nowrap;

  margin: 0 10px;

}

li {

  height: 100%;

  list-style: none;

  margin-right: 10px;

  display: inline-block;

}

</style>

 

 

 

 

 

 

子组件调用  

 

 

 

 

<template>

  <div class="aa">

    <Scroller :lists="list" class="scrollContainer" />

  </div>

</template>

<script>

import Scroller from "@/components/Scroll.vue"

export default {

  components: { Scroller },

  data() {

    return {

      list: ["欢迎大家来一起学习","在一起学习","一起学习","学无止境"]

    };

  }

};

</script>

<style scoped>

/*样式的话可以写*/

.scrollContainer {

  /* color: red; */

  font-size: 16px;

  margin-left: 10px;

  width: 500px;

  height: 30px;

  border: 1px solid #000;

  line-height: 30px;

  overflow: hidden;

}

</style>