vue实现文字轮播，移入移出

最新推荐文章于 2024-05-15 22:50:31 发布

宝敲

最新推荐文章于 2024-05-15 22:50:31 发布

阅读量1.3k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_67778061/article/details/126509055

版权

安装

npm install vue-seamless-scroll --save

封装为组件方便调用

<template>
  <vue-seamless-scroll
    :class-option="classOption"
    :data="list"
    class="warp"
    style="overflow: hidden"
  >
    <slot></slot>
  </vue-seamless-scroll>
</template>
<script>
//文本轮播
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "runscroll",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  components: { vueSeamlessScroll },
  data() {
    return {
      classOption: {
        step: 0.3,//轮播速度，值越大速度越快
      },
    };
  },
  created() {},
};
</script>

接下来只需要按照规范，使用即可引入我们注册好的组件import runscroll from "@/components/runScroll/runscroll.vue";