vue通知(滚动)

  1. li宽度不顾定

    <template>
    • {{item.name}}
    </template> <script> export default { name: "HelloWorld", data() { return { timer: null, pwidth: 0, left: 0, items: [ { name: "1马dfgdfgs云1马dfgdfgs云1马dfgdfgs云1马dfgdfgs云", active: false }, { name: "2雷dfgd军", active: false }, { name: "3dsfgd张珊", active: false } ] }; },

    mounted() {
    this.setLeft();
    },
    watch: {},
    methods: {
    setLeft() {
    let element = this.$refs.cmdlist;
    this.pwidth = document.defaultView
    .getComputedStyle(element, "")
    .width.split("px");
    this.timer = setInterval(() => {
    this.left--;
    let num = parseInt(this.pwidth[0]);
    if (-num >= this.left) {
    console.log("this.left", this.left);
    console.log("-num", -num);
    this.left = 0;
    }
    }, 30);
    },
    clearLeft() {
    if (this.timer) clearInterval(this.timer);
    }
    },
    beforeDestroy() {
    if (this.timer) clearInterval(this.timer);
    }
    };
    </script>

    <style scoped> * { margin: 0; padding: 0; } #app { margin-top: 60px; margin-left: 200px; text-align: center; } #box { width: 600px; height: 50px; overflow: hidden; border: 1px solid #090; } ul { padding: 0px; margin: 0px; display: flex; /* width: 320px; */ height: 50px; border: 1px solid #f00; } li { list-style: none; padding: 0px; margin: 0px; /* padding-right: 30px; */ background: #099; white-space: nowrap; } </style>

box宽度100%会有问题

  1. li宽度固定

    <template>
    • {{item.name}}
    </template> <script> export default { name: "HelloWorld", data() { return { timer: null, pwidth: 0, left: 0, items: [ { name: "1马dfgdfgs云1马dfgdfgs云1马dfgdfgs云1马dfgdfgs云", active: false }, { name: "2雷dfgd军", active: false }, { name: "3dsfgd张珊", active: false } ] }; },

    mounted() {
    this.setLeft();
    },
    watch: {},
    methods: {
    setLeft() {
    let num = this.items.length * 230;
    this.timer = setInterval(() => {
    this.left--;
    if (-num >= this.left) {
    console.log("this.left", this.left);
    console.log("-num", -num);
    this.left = 0;
    }
    }, 30);
    },
    clearLeft() {
    if (this.timer) clearInterval(this.timer);
    }
    },
    beforeDestroy() {
    if (this.timer) clearInterval(this.timer);
    }
    };
    </script>

    <style scoped> * { margin: 0; padding: 0; } #app { margin-top: 60px; margin-left: 200px; text-align: center; } #box { /* width: 600px; */ height: 50px; overflow: hidden; border: 1px solid #090; } ul { display: inline-block; padding: 0px; margin: 0px; display: flex; /* width: 320px; */ height: 50px; border: 1px solid #f00; } li { width: 200px; padding: 0px; margin: 0px 30px 0px 0px; list-style: none; background: #099; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } </style>
相关推荐
【ql君】qlexcel23 分钟前
Notepad++ 复制宏、编辑宏的方法
开发语言·javascript·notepad++··宏编辑·宏复制
MiyueFE23 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子27 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
「、皓子~1 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了1 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_1 小时前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
奋飛1 小时前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构