vue-swipe的使用

【新手向】要在页面上要做一个轮播图用swiper的话大概有110KB,功能很强大。然而我只想用个轮播的简单效果,不需要加特效。通过搜索,发现有一个饿了么前端出品的轮播swipe,刚好满足我的需求,而且只有11KB左右足够精简。废话不多说,开整...

1、安装

$ npm install vue-swipe

2、在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: ''
})

3、在页面xxxx.vue中引用css样式
【注意:不要加scoped,会污染样式,导航的小圆点就不显示了】

4、在页面xxxx.vue中你需要的位置上写代码


    1
    2
    3

5、效果

vue-swipe的使用_第1张图片

好了,就这样。

你可能感兴趣的:(轮播图,vue.js,vue-cli)