1. li宽度不顾定
<template>
<div id="app">
<div id="box" @mouseover="clearLeft" @mouseleave="setLeft">
<ul :style="{ transform: 'translateX(' + left + 'px)' }" ref="cmdlist">
<li v-for="(item,index) in items" :key="index">{
{item.name}}</li>
</ul>
</div>
</div>
</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%会有问题
2. li宽度固定
<template>
<div class="notice">
<div class="left">
<img src="../../../assets/layout/notice.png" alt />
最新公告:
</div>
<div class="center" @mouseleave="setTimer" @mouseover="clearTimer">
<ul :style="{ transform: 'translateX(' + left + 'px)' }" ref="cmdlist">
<li v-for="(item,index) in items" :key="index">{
{item.name}}</li>
</ul>
</div>
<div class="right">2023-10-23 08:49:50</div>
</div>
</template>
<script>
export default {
data() {
return {
timer: null,
left: 0,
items: [
{
name:
"111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111",
active: false
},
{
name: "222222222222222222222222222222222222222222222222222222222",
active: false
},
{
name: "3333333333333333333333333",
active: false
}
]
};
},
computed: {
// ...mapGetters(["ndid", "eid", "ichnoUrl"])
},
methods: {
setTimer() {
let num = (this.items.length - 1) * 1600;
this.timer = setInterval(() => {
this.left--;
if (-num >= this.left) {
this.left = 1600;
}
}, 10);
},
clearTimer() {
if (this.timer) clearInterval(this.timer);
}
},
mounted() {
this.setTimer();
},
components: {},
watch: {},
beforeDestroy() {
if (this.timer) clearInterval(this.timer);
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.notice {
display: flex;
height: 40px;
line-height: 40px;
background: rgba(3, 110, 184, 0.41);
// margin-top: 110px;
font-size: 14px;
z-index: 9999;
background: #090;
.left {
width: 130px;
color: rgb(2, 230, 255);
img {
width: 14px;
margin: 12px 5px 0px 30px;
float: left;
}
}
.center {
width: 1600px;
overflow: hidden;
cursor: pointer;
ul {
width: 4800px;
padding: 0px;
margin: 0px;
}
li {
float: left;
width: 1600px;
padding: 0px;
margin: 0px;
list-style: none;
// background: #099;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: #fff;
}
}
.right {
width: 190px;
color: rgb(2, 230, 255);
}
}
</style>
li的宽度是1600px,图片可以注释掉,设计稿宽度是1920px