当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue移动端轻量级的轮播组件实现代码

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

2018年08月06日  | 移动技术网IT编程  | 我要评论

决战中的较量下载,北京新世纪影城,海军上将泰勒的保险箱

一个简单的移动端卡片滑动轮播组件，适用于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 单文件组件中使用:

<swipe
 v-model="index"
 style="text-align: center; line-height: 80px; height: 100px; background: #42b983;"
>
 <swipe-item style="height: 100px; line-height: 100px">item1</swipe-item>
 <swipe-item style="height: 100px; line-height: 100px">item2</swipe-item>
 <swipe-item style="height: 100px; line-height: 100px">item3</swipe-item>
</swipe>
new vue({
 data: function () {
  return {
   index: 0, // two way
  };
 },
});

或者，你想在 html 标签中直接引用

<link href="../node-modules/c-swipe/dist/swipe.css" rel="external nofollow" rel="stylesheet"></head>
<script type="text/javascript" src="../node-modules/c-swipe/dist/swipe.js"></script>
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 滚屏距离不正确的问题。

例：

<swipe ref="swipe">
 <swipe-item>item1</swipe-item>
 <swipe-item>item2</swipe-item>
 <swipe-item>item3</swipe-item>
</swipe>
<script>
 export default {
  // ...
  // ...
  handleresize() {
   this.$refs.swipe.reset();
  }
  mounted() {
   // 避免上下文丢失
   this.handleresize = this.handleresize.bind(this);
   window.addeventlistener('resize', this.handleresize);
  },
  destroyed() {
   window.removeeventlistener('resize', this.handleresize);
  }
  // ...
  // ...
 }
</script>

总结

以上所述是小编给大家介绍的vue移动端轻量级的轮播组件实现代码，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网