vue 跑马灯

import scroll from 'vue-seamless-scroll'

Vue.use(scroll)

具体的安装步骤就不说了，也是进行了单独的封装，直接上代码（没有具体写外部传入组件内部内容），有滚动并且划上去会停止

<template>
  <vue-seamless-scroll :data="newsList" :class-option="optionLeft" class="seamless-warp2">
   <span>{{newsList[0]}}</span> 
  </vue-seamless-scroll>
</template>

<script>
export default {
  data() {
    return {
      newsList: [  "我是跑马灯我是跑马灯我是跑马灯我是跑马灯我是跑马灯我是跑马灯我是跑马灯我是跑马灯我是跑马灯我是跑马灯" ]
    };
  },
  computed: {
    optionLeft() {
      return {
        direction: 2,
        limitMoveNum: 1
      };
    }
  }
};
</script>
<style lang="scss" scoped>

</style>

引用

<template>
  <div style="width: 100%; height: 100%">
      <common-scroll></common-scroll>
  </div>
</template>

<script>

import CommonScroll from "./components/commonScroll";
export default {
  data() {
    return {
     
    };
  },
  
  methods: {
   
  },
  mounted() {
  },
  components: {
    CommonScroll
  }
};
</script>

<style scoped>


</style>