vue实现公告消息横向无缝循环滚动

本文实例为大家分享了vue实现公告消息横向无缝循环滚动的具体代码，供大家参考，具体内容如下

该组件实现了公告消息的无缝横向滚动。我命名为marqueex.vue文件，感谢原来博主的分享，我自己做个总结

marqueex.vue

其他模块引入根据自己目录引入

html部分

js部分

import marqueeLeft from "./marqueeX";

export default {
  data() {
    return {
      newsList: [
        {
          name: "张三1",
          detail:
            "信息公告：2020年10月14限公司成立，我行用信金额111111元",
        },
        {
          name: "张三2",
          detail:
            "信息公告：2020年9月30大幅度发大发的，我行用信金额222222元",
        },
        {
          name: "张三3",
          detail:
            "信息公告：2020年12月有限公司成立，我行用信金额333333元",
        },
        {
          name: "张三4",
          detail:
            "信息公告：2020年8月31有限公司成立，我行用信金额444444元",
        },
      ],
    };
  },
  components: {
    marqueeLeft,
  },

css部分

.messageBox {
  width: 60%;
  overflow: hidden;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。