Swiper轮播图简单应用

最新推荐文章于 2024-09-13 23:32:49 发布

WinnerCC

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量193

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/WinnerCC/article/details/130245805

版权

文章介绍了如何在Vue项目中使用Swiper库创建轮播图，包括安装Swiper、引入样式和JavaScript文件，以及在组件中设置轮播图结构。同时，针对数据延迟的情况，提供了在watcher中利用$nextTick初始化轮播图实例的解决方案，和在mounted钩子中直接实例化的做法。此外，还提到了轮播图的配置选项如loop、autoplay和pagination。

摘要由CSDN通过智能技术生成

Swiper轮播图怎么写

一、安装swiper

npm install swiper

二、引入swiper

在项目的入口文件引入css样式

import 'swiper/css/swiper.css';

在用到swiper的组件中引入swiper

import Swiper from 'swiper';

写轮播图结构

<div class="swiper-container" id="floor1Swiper" ref="cur">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(carousel, index) in list.carouselList" :key="carousel.id">
            <img :src="carousel.imgUrl">
        </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

new轮播图实例
①若当前轮播图中的数据是在当前组件中向服务器发请求获取的，那么请求数据需要时间，那么会导致new轮播图实例的时候，数据都还没来到前台呢。需要用watch + nextTick来解决这个问题

watch: {
    bannerList: {
        handler(newValue, oldValue) {
            this.$nextTick(() => {
                var mySwiper = new Swiper(this.$refs.mySwiper, {
                    loop: true,
                    speed: 300,
                    grabCursor: true,
                    autoplay: {
                        delay: 3000
                    },
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true,
                    },
                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                })
                })
        }
    }
}

②倘若轮播图用到的数据不用当前组件去向服务器请求，也就是说当前组件已经拿到数据，那可以直接在mouted中写轮播图实例对象

mounted() {
    this.$nextTick(() => {
        var mySwiper = new Swiper(this.$refs.cur, {
            loop: true,
            speed: 300,
            grabCursor: true,
            autoplay: {
                delay: 3000
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })
    })
}