update

src/components/XNoticeBar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {computed, nextTick, onMounted, ref, watch} from "vue";
+import {nextTick, ref, watch} from "vue";
 import warn from '../static/icons/warn.png';
 import success from '../static/icons/info.png';
 
@@ -33,12 +33,6 @@ const {text, status, tile, textColor} = defineProps({
     }
 });
 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();
@@ -64,17 +58,24 @@ watch(
     {deep: true}
 )
 
-onMounted(() => {
-    setInterval(() => {
-        showIndex.value++;
-        if (showIndex.value > text.length - 1) {
-            showIndex.value = 0;
+const changeCur = ({detail: {current}}) => {
+    if (
+        Context.value[current].$el.clientWidth
+        >
+        XNoticeBox.value[current].$el.clientWidth
+    ) {
+        setTimeout(() => {
+            roll.value = true;
+        }, 500);
+    } else {
+        roll.value = false;
     }
-    }, 5000);
-});
+}
 </script>
 
 <template>
+    <swiper style="height: 80rpx;" autoplay vertical @change="changeCur">
+        <swiper-item v-for="v in text">
             <view ref="XNoticeBox" :class="['x-notice-box', STATUS[status].bg]">
                 <view ref="Context" :class="['context', roll ? 'roll' : '', STATUS[status].context]"
                       :style="{alignItems: tile ? 'start' : 'center'}">
@@ -84,14 +85,15 @@ onMounted(() => {
                         <view
                             class="!whitespace-nowrap flex-shrink-0"
                             :style="{color: textColor}"
-                    v-for="v in textC.filter(v => v.show)"
-                    v-html="v.text">
+                            v-html="v">
                         </view>
                     </view>
                     <text v-else :style="{color: textColor}" v-html="text">
                     </text>
                 </view>
             </view>
+        </swiper-item>
+    </swiper>
 </template>
 
 <style scoped lang="scss">