vue-swipe的使用

【新手向】要在頁面上要作一個輪播圖用swiper的話大概有110KB，功能很強大。然而我只想用個輪播的簡單效果，不須要加特效。經過搜索，發現有一個餓了麼前端出品的輪播swipe，恰好知足個人需求，並且只有11KB左右足夠精簡。廢話很少說，開整...

一、安裝

$ npm install vue-swipe

二、在main.js中添加

import Vue from 'vue'
import App from './App'
import routes from './router/router-config'
import { Swipe, SwipeItem } from 'vue-swipe'  // 加這裏

Vue.component('swipe', Swipe)  // 加這裏
Vue.component('swipe-item', SwipeItem) // 加這裏

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

三、在頁面xxxx.vue中引用css樣式
【注意:不要加scoped,會污染樣式，導航的小圓點就不顯示了】

<style>
@import 'vue-swipe/dist/vue-swipe.css';
.my-swipe {
  height: 200px;
  color: #fff;
  font-size: 30px;
  text-align: center;
}

.slide1 {
  background-color: #0089dc;
  color: #fff;
}

.slide2 {
  background-color: #ffd705;
  color: #000;
}

.slide3 {
  background-color: #ff2d4b;
  color: #fff;
}
</style>

四、在頁面xxxx.vue中你須要的位置上寫代碼

<swipe class="my-swipe">
    <swipe-item class="slide1">1</swipe-item>
    <swipe-item class="slide2">2</swipe-item>
    <swipe-item class="slide3">3</swipe-item>
</swipe>

五、效果

好了，就這樣。