使用vue怎么实现一个移动端轻量级轮播组件-创新互联

今天就跟大家聊聊有关使用vue怎么实现一个移动端轻量级轮播组件，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

成都创新互联主要从事成都网站制作、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务徽州,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

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 单文件组件中使用:

 item1
 item2
 item3

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.reset()

c-swipe 内部将重新计算 Swipe 的宽度，并根据新的宽度来计算滚屏的距离。这个可以解决容器重置大小后 c-swipe 滚屏距离不正确的问题。

例：

 item1
 item2
 item3

看完上述内容，你们对使用vue怎么实现一个移动端轻量级轮播组件有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。

标题名称：使用vue怎么实现一个移动端轻量级轮播组件-创新互联
文章来源：http://cdxtjz.cn/article/coopei.html