vue移动端轻量级的轮播组件实现代码
来源：
中文源码网 浏览：361 次 日期：2024-05-16 02:36:13
【下载文档: vue移动端轻量级的轮播组件实现代码.txt 】
vue移动端轻量级的轮播组件实现代码
一个简单的移动端卡片滑动轮播组件，适用于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 单文件组件中使用:
v-model="index"
style="text-align: center; line-height: 80px; height: 100px; background: #42b983;"
>
item1item2item3new 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.reset()
c-swipe 内部将重新计算 Swipe 的宽度，并根据新的宽度来计算滚屏的距离。这个可以解决容器重置大小后 c-swipe 滚屏距离不正确的问题。
例：
item1
item2
item3
总结
以上所述是小编给大家介绍的vue移动端轻量级的轮播组件实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对中文源码网网站的支持！
