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;
}

你可能感兴趣的:(Vue,vue.js)