Vue 仿咕咚運動Swiper輪播

序言

最近空閒的時候偶然看到一個效果，相似於輪播的效果，話很少說，直接看圖：

咕咚運動裏面的，而後本着鞏固 Vue 知識的目的，用Vue實現了一把，用到的就是 swiper 這個插件，下面我來介紹一下用法：

一、第一步

在建立好的 Vue 項目中使用下面的命令來下載 swiper：

npm install vue-awesome-swiper --save
複製代碼

二、第二步

而後在文件中引入 swiper 組件和 樣式表：

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

三、第三步

而後就可使用 swiper 了：

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

複製代碼

而後關於 swiper 組件的一些設置，能夠去swiper中文官網查閱

上 Github地址

小白請先看這裏

一、初識前端

二、初識JavaScript

三、Android開發人員不得不學習的JavaScript基礎（一）

四、Android開發人員不得不學習的JavaScript基礎（二）

五、Android開發人員不得不學習的Vue.js基礎

公衆號

歡迎關注個人我的公衆號【IT先森養成記】，專一大前端技術分享，包含Android，Java，Kotlin，Flutter，HTML，CSS，JS等技術；在這裏你能獲得的不止是技術上的提高，還有一些學習經驗以及志同道合的朋友，趕快加入咱們，一塊兒學習，一塊兒進化吧！！！