需求:后端传给一个关于时间的数组,页面展示的内容要根据这个数组的时间来进行不同的展示
<template>
<div>
{{ content }}
</div>
</template>
<script setup>
import { ref, watch, onMounted } from 'vue';
// 定义数据
const pages = ref(['Page 1', 'Page 2', 'Page 3', 'Page 4']); //要展示的内容
const currentPage = ref(Number);
const pageDisplayTime = ref([5000, 3000, 4000, 1000]) //后端提供的时间数组
const content = ref(String)
onMounted(() => {
// 页面加载时开始循环展示
currentPage.value = 0;
content.value = pages.value[currentPage.value]
})
// 监听currentPage变化,并在页面显示时间结束后自动切换到下一页
watch(currentPage, (newVal) => {
setTimeout(() => {
if (newVal < pages.value.length - 1) {
currentPage.value = newVal + 1;
content.value = pages.value[currentPage.value]
} else {
currentPage.value = 0;
content.value = pages.value[currentPage.value]
}
}, pageDisplayTime.value[newVal]);
});
</script>
<style lang="scss" scoped></style>