客戶永遠喜歡把一堆資訊塞在小小的方格裡,這次遇到的需求是要把多個文字進行像圖片那樣的自動輪播,以下已 vue 來示範 (主要使用css)
// 組件
<template>
<div class="carousel-container" carousel-theme="speed">
<ul class="rwd-text_title">
<slot />
</ul>
</div>
</template>
<script>
import { computed } from 'vue'
export default {
props: {
length: {
type: Number,
},
},
setup(props) {
const amount = computed(() => props.length)
return { amount }
},
}
</script>
<style lang="scss">
$s: v-bind(amount);
:root {
--h: 16;
--speed: 1.8s;
}
.carousel-container {
position: relative;
top: 0;
width: 50%;
color: black;
overflow: hidden;
}
.carousel-container {
ul {
position: absolute;
top: -0.24em;
left: 0;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
width: 100%;
animation: move calc(v-bind(amount) * var(--speed)) steps($s) infinite;
}
li {
flex-shrink: 0;
width: 100%;
padding-left: 10px;
text-align: right;
box-sizing: border-box;
white-space: nowrap;
animation: liMove var(--speed) infinite;
}
}
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, calc(v-bind(amount) * var(--h) * -1px));
}
}
@keyframes liMove {
0% {
transform: translate(0, 0);
}
80%,
100% {
transform: translate(0, calc(var(--h) * -1px));
}
}
</style>
調用:
<carousel-text :length="6">
<li v-for="idx in 6" :key="`carousel-${idx}`">
輪播文字---------
</li>
<!-- 末尾補一個首尾數據 -->
<li v-if="alarmConditions.length">
輪播文字---------~
</li>
</carousel-text>
先暫時更新,晚點再來補說明