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,34 +58,42 @@ watch(
     {deep: true}
 )
 
-onMounted(() => {
+const changeCur = ({detail: {current}}) => {
-    setInterval(() => {
+    if (
-        showIndex.value++;
+        Context.value[current].$el.clientWidth
-        if (showIndex.value > text.length - 1) {
+        >
-            showIndex.value = 0;
+        XNoticeBox.value[current].$el.clientWidth
-        }
+    ) {
-    }, 5000);
+        setTimeout(() => {
-});
+            roll.value = true;
+        }, 500);
+    } else {
+        roll.value = false;
+    }
+}
 </script>
 
 <template>
-    <view ref="XNoticeBox" :class="['x-notice-box', STATUS[status].bg]">
+    <swiper style="height: 80rpx;" autoplay vertical @change="changeCur">
-        <view ref="Context" :class="['context', roll ? 'roll' : '', STATUS[status].context]"
+        <swiper-item v-for="v in text">
-              :style="{alignItems: tile ? 'start' : 'center'}">
+            <view ref="XNoticeBox" :class="['x-notice-box', STATUS[status].bg]">
-            <image v-if="status==='error'" class="!size-[26rpx] flex-shrink-0" :src="warn"></image>
+                <view ref="Context" :class="['context', roll ? 'roll' : '', STATUS[status].context]"
-            <image v-else class="!size-[26rpx] flex-shrink-0" :src="success"></image>
+                      :style="{alignItems: tile ? 'start' : 'center'}">
-            <view v-if="!tile">
+                    <image v-if="status==='error'" class="!size-[26rpx] flex-shrink-0" :src="warn"></image>
-                <view
+                    <image v-else class="!size-[26rpx] flex-shrink-0" :src="success"></image>
-                    class="!whitespace-nowrap flex-shrink-0"
+                    <view v-if="!tile">
-                    :style="{color: textColor}"
+                        <view
-                    v-for="v in textC.filter(v => v.show)"
+                            class="!whitespace-nowrap flex-shrink-0"
-                    v-html="v.text">
+                            :style="{color: textColor}"
+                            v-html="v">
+                        </view>
+                    </view>
+                    <text v-else :style="{color: textColor}" v-html="text">
+                    </text>
                 </view>
             </view>
-            <text v-else :style="{color: textColor}" v-html="text">
+        </swiper-item>
-            </text>
+    </swiper>
-        </view>
-    </view>
 </template>
 
 <style scoped lang="scss">