C-Swipe Mobile 一个适用于Vue2.x的移动端轮播组件
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
近期在做的一个Vue2项目里需要一个可以滑动的轮播组件,但是又因为现有的传统轮播库功能过于繁琐和笨重。因此自己写了一个针对于Vue2.x的轻型轮播组件。
项目GitHub链接:C-Swipe Mobile 无耻的求个star
目前仅支持移动端。
组件通过v-model
绑定了组件当前分页索引值,这很大的方便了组件的使用者。
其实想想目前这个组件也不能叫轮播组件,因为目前是不支持自动轮播的,只支持手动左右滑动切换分页,不过后期考虑加入自动轮播等功能。
以下是组件的文档:
C-Swipe Mobile
A swipe (touch slide) component for Vue2.x in mobile device. Only support touch event now.
Usage
register components:
// main.js
// import Vue files into main.js
import Swipe from './components/vue-swipe.vue';
import SwipeItem from './components/vue-swipe.vue';
// register components
Vue.component('swipe', Swipe);
Vue.component('swipe-item', SwipeItem);
Work on a Vue instance:
<swipe v-model="index" style="text-align: center; line-height: 80px;">
<swipe-item style="height: 100px;">item1</swipe-item>
<swipe-item style="height: 100px;">item2</swipe-item>
<swipe-item style="height: 100px;">item3</swipe-item>
</swipe>
new Vue({
// ...
// ...
// ...
data: function () {
return {
index: 0, // two way
};
},
});
Options
Option | Description |
---|---|
v-model | Number. The value binding index of swipe-item, binding two way. |
pagination | Boolean. If need default pagination. If you want to customize pagination, the value of v-model will help you make sure which item is showing. |
License
MIT