标签：scss flex marquee 微信 text 走马灯 world Hello left
<template>
<view class="marquee">
<view class="marquee-inner">
<span v-for="(item, index) of textList" :key="index">{{ item.text }}</span>
<!-- 复制一份内容 -->
<span v-for="(item, index) of textList" :key="'duplicate-' + index">{{ item.text }}</span>
</view>
</view>
</template>
<script>
export default {
props: {
// 默认值为空数组
textList: {
type: Array,
default: () => [
{
text: 'Hello, world!',
},
{
text: 'Hello, world1111111111111111!',
},
{
text: 'Hello, world!',
},
{
text: 'Hello, world11111!',
},
{
text: 'Hello, world!',
}
]
}
},
components: {
},
computed: {
},
data() {
return {
}
},
created() {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
watch: {
}
}
</script>
<style lang="scss" scoped>
.marquee {
overflow: hidden;
width: 100%;
height: 45rpx;
line-height: 45rpx;
font-size: 20rpx;
color: #FCDEB5;
white-space: nowrap;
padding-left: 100%;
display: flex;
justify-content: center;
align-items: center;
.marquee-inner { /* 添加一个新的内部容器用于放置重复内容 */
display: flex;
flex-wrap: nowrap;
animation: marquee 15s linear infinite;
> span {
display: inline-block; /* 改为 inline-block 以便多个项在同一行 */
background-color: rgba(250, 223, 168, 0.2);
border-radius: 20rpx;
margin-left: 69rpx;
padding: 0 20rpx;
:nth-of-type(1) {
margin-left: 0;
}
&:last-child {
margin-left: -69rpx;
}
}
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
}
</style>
标签：scss,
flex,
marquee,
微信,
text,
走马灯,
world,
Hello,
left
From： https://www.cnblogs.com/DL-CODER/p/17994881