Vue 仿咕咚运动Swiper轮播

序言

最近空闲的时候偶然看到一个效果，类似于轮播的效果，话不多说，直接看图：

image

咕咚运动里面的，然后本着巩固 Vue 知识的目的，用Vue实现了一把，用到的就是 swiper 这个插件，下面我来介绍一下用法：

1、第一步

在创建好的 Vue 项目中使用下面的命令来下载 swiper：

npm install vue-awesome-swiper --save

2、第二步

然后在文件中引入 swiper 组件和 样式表：

<script>
    import "../style/swiper.min.css";
    import { swiper, swiperSlide } from "vue-awesome-swiper";
</script>

3、第三步

然后就可以使用 swiper 了：

    <swiper :options="swiperOption">
      <!-- slides -->
      <swiper-slide v-for="(item, index) in imageList" :key="index">
        <img :src="item">
      </swiper-slide>
    </swiper>

然后关于 swiper 组件的一些设置，可以去swiper中文官网查阅

上 Github地址

小白请先看这里

1、初识前端

2、初识JavaScript

3、Android开发人员不得不学习的JavaScript基础（一）

4、Android开发人员不得不学习的JavaScript基础（二）

5、Android开发人员不得不学习的Vue.js基础

公众号

欢迎关注我的个人公众号【IT先森养成记】，专注大前端技术分享，包含Android，Java，Kotlin，Flutter，HTML，CSS，JS等技术；在这里你能得到的不止是技术上的提升，还有一些学习经验以及志同道合的朋友，赶快加入我们，一起学习，一起进化吧！！！

公众号：IT先森养成记