Swiper使用心得（单排多张轮播图）Vue2

Swiper使用心得（单排多张轮播图）Vue2

前言

心情复杂啊，折磨了一下午，晚上抽时间钻研了一会儿，才搞懂了Swiper的基本使用和踩坑点，（本文章不会用太多冗余的话语教你怎么用，只会让你短时间上手，如果想全面学习，请前往Swiper中文网）话不多说，上代码：

首先

1. 首先进行 npm install swiper --save-dev

2. 之后在main.js或者组件内引用
   import Swiper from ‘swiper/swiper-bundle.min.js’;
   import ‘swiper/swiper-bundle.min.css’;
   

3. 在**mounted()**生命周期中进行初始化Swiper
   4.在HTML中渲染内容

5.CSS进行样式设置（根据自己需求设置）

该组件的踩坑点

1. 如果设置后，不可以滚动；请查看父容器的方向是否设置成垂直

2. 该组件的渲染是数组内放置对象格式（如图）

3. Swiper左右箭头一定要放置到图片容器外侧

4. 如果按照以上步骤设置后还是不行，去找class为swiper-slide的div查看width宽度是否太宽造成多张图片不在一起

附代码

<template>
    <div class="swiper-container">
        <!--父容器-->
        <div class="swiper-wrapper" v-for="(img, index) in list" :key="index">
            <!--图片容器，放置渲染的图片-->
            <div class="swiper-slide">{{ img.title }}</div>
        </div>
        <div class="swiper-button-prev"></div><!-- 左右按钮，放到图片容器外部 -->
        <div class="swiper-button-next"></div>
    </div>
</template>

<script>

import Swiper from 'swiper/swiper-bundle.min.js';
//一定要引入css
import 'swiper/swiper-bundle.min.css';
export default {
    name: 'ceShi',
    data() {
        return {
            msg: 'Welcome to Your Vue.js App',
            list: [
                {
                    title: '1'
                }, {
                    title: '2'
                }, {
                    title: '3'
                }, {
                    title: '4'
                }, {
                    title: '5'
                }, {
                    title: '6'
                },
            ]
        }
    },
    mounted() {
        var swiper = new Swiper('.swiper-container', {
            mode: 'horizontal',//设置滚动方向
            navigation: {
                nextEl: '.swiper-button-next',//左右按钮
                prevEl: '.swiper-button-prev',
            }
        });
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body {
    margin: 0;
    padding: 0;
}

.swiper-container {
    width: 500px;
    height: 300px;
    margin: 20px auto;
}

.swiper-container {
    display: flex;
}
</style>

本文章主记录工作中的日常代码，如有疑问请私信