vue 跑马灯

最新推荐文章于 2024-10-16 20:59:14 发布

小皮皮不皮

最新推荐文章于 2024-10-16 20:59:14 发布

阅读量149

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue element 文章标签： vue

本文链接：https://blog.youkuaiyun.com/fengxiaopeng74/article/details/112235528

vue element 专栏收录该内容

6 篇文章

订阅专栏

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>