vue-swipe轮播图

一、安装饿了么团队开发的vue专用的轮播图插件:vue-swipe
npm install vue-swipe

二、在index.js文件中引用vue-swipe

require('vue-swipe/dist/vue-swipe.css');
import { Swipe, SwipeItem } from 'vue-swipe';

三、在index.js中注册组件

Vue.component('swipe', Swipe);
Vue.component('swipe-item', SwipeItem);

四、在需要使用的components下面的.vue页面中直接引用

  
      1
      2
      3
   

需要写样式。样式例子:

.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;
}

vue-swipe的github地址:
https://github.com/ElemeFE/vue-swipe

你可能感兴趣的:(vue-swipe轮播图)