序言

最近空閑的時(shí)候偶然看到一個(gè)效果，類似于輪播的效果，話不多說(shuō)，直接看圖：

image

咕咚運(yùn)動(dòng)里面的，然后本著鞏固 Vue 知識(shí)的目的，用Vue實(shí)現(xiàn)了一把，用到的就是 swiper 這個(gè)插件，下面我來(lái)介紹一下用法：

1、第一步

在創(chuàng)建好的 Vue 項(xiàng)目中使用下面的命令來(lái)下載 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>

然后關(guān)于 swiper 組件的一些設(shè)置，可以去swiper中文官網(wǎng)查閱

上 Github地址

小白請(qǐng)先看這里

1、初識(shí)前端

2、初識(shí)JavaScript

3、Android開(kāi)發(fā)人員不得不學(xué)習(xí)的JavaScript基礎(chǔ)（一）

4、Android開(kāi)發(fā)人員不得不學(xué)習(xí)的JavaScript基礎(chǔ)（二）

5、Android開(kāi)發(fā)人員不得不學(xué)習(xí)的Vue.js基礎(chǔ)

公眾號(hào)

歡迎關(guān)注我的個(gè)人公眾號(hào)【IT先森養(yǎng)成記】，專注大前端技術(shù)分享，包含Android，Java，Kotlin，F(xiàn)lutter，HTML，CSS，JS等技術(shù)；在這里你能得到的不止是技術(shù)上的提升，還有一些學(xué)習(xí)經(jīng)驗(yàn)以及志同道合的朋友，趕快加入我們，一起學(xué)習(xí)，一起進(jìn)化吧?。。?/p>

公眾號(hào)：IT先森養(yǎng)成記