这篇文章主要介绍了vue移动端轻量级的轮播组件实现代码，一个简单的移动端卡片滑动轮播组件，适用于Vue2.x。本文给大家带来了实例代码，需要的朋友参考下吧
一个简单的移动端卡片滑动轮播组件，适用于Vue2.x
c-swipe 2.0 全新归来。重写了全部的代码，更靠谱的质量，更优秀的性能
English Document
安装
npm install c-swipe --save
使用
注册组件
// main.js // 引入 c-swipe 主文件 import 'c-swipe/dist/swipe.css'; import { Swipe, SwipeItem } from 'c-swipe'; // 全局注册组件 Vue.component('swipe', Swipe); Vue.component('swipe-item', SwipeItem);
在 .vue 单文件组件中使用:
item1item2item3 new Vue({ data: function () { return { index: 0, // two way }; }, });
或者，你想在 html 标签中直接引用
var vueSwipe = swipe.Swipe; var vueSwipeItem = swipe.SwipeItem; new Vue({ el: 'body', // 注册组件 components: { 'swipe': vueSwipe, 'swipe-item': vueSwipeItem }, // ... // ... });
配置
| 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|
| v-model | Number | 0 | 绑定了当前显示卡片的索引，该数据为双向绑定，可通过更改 v-model 的值直接更改当前显示卡片 |
| pagination | Boolean | true | 是否需要默认样式的导航器 |
| loop | Boolean | true | 循环切换 |
| autoplayTime | Number | 0 | 单位 ms，自动切换卡片的时间间隔，值为 0 时不自动切换 |
| speed | Number | 300 | 单位 ms, 切换卡片时的过渡效果的播放时长 |
| minMoveDistance | String | ‘20%’ | 成功触发切换卡片事件的最小滑动距离，可以传入百分比，如 ‘20%’，或者传入具体像素距离，如 ’80px’。 |
方法
swipe.r本文来源gao@dai!ma.com搞$代^码!网7eset()
c-swipe 内部将重新计算 Swipe 的宽度，并根据新的宽度来计算滚屏的距离。这个可以解决容器重置大小后 c-swipe 滚屏距离不正确的问题。
例：
item1item2item3
总结
以上就是vue移动端轻量级的轮播组件实现代码的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue移动端轻量级的轮播组件实现代码
转载请注明原文链接：vue移动端轻量级的轮播组件实现代码
