原文地址:https://segmentfault.com/a/1190000013909870
【新手向】要在页面上要做一个轮播图用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: '<App/>'
})
3、在页面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>
4、在页面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>
5、效果
好了,就这样。