vue移动终端轻量级轮播组件实现代码

一个简单的移动卡滑动转盘组件适用于Vue2.x

C-swing 2.0完全回来了。重写了所有代码，质量更可靠，性能更好

英语文档

装置

npm安装c-刷卡-保存

使用

注册组件

//main.js//导入了c-swing主文件import ' c-swing/dist/swing . CSS '；从“c-swipe”导入{ Swipe，Swipe item }；//全局注册组件vue.component(‘Swipe’、‘Swipe’、‘swing’)；Vue.component('swipe-item '，swipe item)；在中使用：vue单文件组件

swipe v-model=' index ' style=' text-align : center；线高： 80px；高度： 100像素；背景# 42b983'swipe-item style=' height : 100 px；line-height : 100px ' item 1/swipe-item swipe-item style=' height : 100px；line-height : 100px ' item 2/swipe-item swipe-item style=' height : 100px；line-height : 100px ' item 3/swipe-item/swipenew Vue({ data : function(){ return { index : 0，//双向}；},});或者，您希望在html标记中直接引用它

链接href='./node-modules/c-swipe/dist/swipe . CSS ' rel=' external no follow ' rel='样式表'/head script type=' text/JavaScript ' src=' http :/node-modules/c-swipe/dist/swipe . js '/script var vueSwipe=swipe。刷卡；var vueSwipeItem=刷卡。SwipeItem新Vue({ el: 'body '，//注册组件组件： {'swipe' 3360vueswipe，' swipe-item' :vueswipeitem}，//./.});配置

选项类型默认描述v-model Number 0绑定到当前显示卡片的索引，数据双向绑定。可以通过改变v-model的值，是否需要默认样式的navigator loop Boolean true循环切换autoplayTime Number 0单位ms，自动切换卡片的时间间隔，直接改变当前显示的卡片分页Boolean true。该值为0时，速度数不会自动切换300单位ms，换牌时过渡效果的播放时间为minMoveDistance String '20% '成功触发换牌事件的最小滑动距离，可以按百分比传递，如' 20% '，也可以按特定像素距离传递，如' 80px '。方法

滑动.重置()

在c-swing内，将重新计算swing的宽度，并根据新的宽度计算滚动距离。这样可以解决容器大小调整后c-sweep滚动距离不正确的问题。

示例：

swipe ref=' swipe ' swipe-item 1/swipe-item swipe-item 2/swipe-item swipe-item 3/swipe-item/swipe script导出默认值{ //.//.handleResize() { this。$ refs . swipe . reset()；} mounted() {//避免上下文丢失这一点。handleresize=this。handleresize。绑定(这个)；window . addeventlistener(' resize '，this . handleresize)；}，销毁(){ window . removeeventlistener(' resize '，this . handleresize)；} //.//.}/脚本摘要

以上是边肖介绍的vue移动终端轻量级carousel组件的实现代码，对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！