Vue轮播组件

示例代码

<template>
    <div class="div-body">
        <!--  autoPlay:是否自动轮播 showIndicator:是否显示轮播的那个点 interval:间隔时间 duration:每次滚动一页需要多久时间-->
        <Swiper ref="swiper" v-if="items.length > 0" :autoPlay='true' :showIndicator='false' interval="5000" duration="500">
            <Slide v-for="item in items">
                <div>{{ item.systemType }}</div>
            </Slide>
        </Swiper>
    </div>
</template>
<script>
    import { Swiper, Slide } from 'vue-swiper-component';
    import axios from 'axios'
    export default {
        data() {
            return {
                items: {}
            }
        },
        methods: {
            getData() {
                axios.get('/api/remind').then((res) => {
                    this.items = res.data;
                })
            }
        },
        components: {
            Swiper,
            Slide
        },
        mounted() {
            this.getData();
        //  setInterval(this.getData, 120000);
        }
    }
</script>

小结

1. 安装轮播组件 npm i vue-swiper-component –save
2. 引入组件 import { Swiper, Slide } from ‘vue-swiper-component’
3. Swiper 设置轮播属性，Slide中设置轮播的内容