update

src/components/XNoticeBar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {onMounted, ref, watch} from "vue";
+import {computed, nextTick, onMounted, ref, watch} from "vue";
 import warn from '../static/icons/warn.png';
 import success from '../static/icons/info.png';
 
@@ -16,8 +16,8 @@ const STATUS = {
 
 const {text, status, tile, textColor} = defineProps({
     text: {
-        type: String,
-        default: '提示：请在规定时间内，按要求提交回填1。以免影响收益。哈哈哈哈哈哈哈哈哈哈'
+        type: Array,
+        default: ['1.你好你好', '2.啊我就会发回复哈', '3.测试啊u发哈u发货']
     },
     textColor: {
         type: String,
@@ -32,37 +32,45 @@ const {text, status, tile, textColor} = defineProps({
         default: false,
     }
 });
+const showIndex = ref(0);
+const textC = computed(() => {
+    return text.map((v, index) => ({
+        show: index === showIndex.value,
+        text: `${index + 1}. ${v}`,
+    }))
+});
 
 const XNoticeBox = ref();
 const Context = ref();
 const roll = ref(false);
 
 watch(
-    () => text,
+    () => showIndex.value,
     () => {
         if (!tile) {
-            if (
-                Context.value.$el.clientWidth
-                >
-                XNoticeBox.value.$el.clientWidth
-            ) {
-                roll.value = true;
-            }
+            nextTick(() => {
+                if (
+                    Context.value.$el.clientWidth
+                    >
+                    XNoticeBox.value.$el.clientWidth
+                ) {
+                    roll.value = true;
+                } else {
+                    roll.value = false;
+                }
+            })
         }
     },
     {deep: true}
 )
 
 onMounted(() => {
-    if (!tile) {
-        if (
-            Context.value.$el.clientWidth
-            >
-            XNoticeBox.value.$el.clientWidth
-        ) {
-            roll.value = true;
+    setInterval(() => {
+        showIndex.value++;
+        if (showIndex.value > text.length - 1) {
+            showIndex.value = 0;
         }
-    }
+    }, 5000);
 });
 </script>
 
@@ -72,8 +80,14 @@ onMounted(() => {
               :style="{alignItems: tile ? 'start' : 'center'}">
             <image v-if="status==='error'" class="!size-[26rpx] flex-shrink-0" :src="warn"></image>
             <image v-else class="!size-[26rpx] flex-shrink-0" :src="success"></image>
-            <text v-if="!tile" class="!whitespace-nowrap flex-shrink-0" :style="{color: textColor}"
-                  v-html="text"></text>
+            <view v-if="!tile">
+                <view
+                    class="!whitespace-nowrap flex-shrink-0"
+                    :style="{color: textColor}"
+                    v-for="v in textC.filter(v => v.show)"
+                    v-html="v.text">
+                </view>
+            </view>
             <text v-else :style="{color: textColor}" v-html="text">
             </text>
         </view>
@@ -120,7 +134,7 @@ onMounted(() => {
 
 @keyframes Roll {
     0% {
-        transform: translateX(100%);
+        transform: translateX(0%);
     }
     100% {
         transform: translateX(-100%);