本文介绍如何在Vue应用中利用Swiper组件，结合API定时获取新数据，实现实时更新的大屏滚动播放效果。具体实现方法是通过定时器定期获取实时数据，并将新数据推送到Swiper轮播中进行展示。
需求：如需要一个大屏滚动播放实时数据。那么就可以定时获取数据。然后推送至swiper轮播内
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<!-- Demo styles -->
<style>
.swiper-container {
border: 1px solid;
width: 480px;
height: 650px;
}
.swiper-slide {
text-align: center;
background: rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div id="app">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper" id="swiper-wrapper"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
window.onload = () => {
var app = new Vue({
el: '#app',
data: {
},
最低0.47元/天 解锁文章
扫一扫
625
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
