c-swipe 一个适用于 vue 的移动端轮播组件
发布于 2年前 作者 pspgbhu 3670 次浏览 最后一次编辑是 1个月前 来自 分享

近期在做的一个Vue2项目里需要一个可以滑动的轮播组件,但是又因为现有的传统轮播库功能过于繁琐和笨重。因此自己写了一个针对于Vue2.x的轻型轮播组件。

推荐在 GitHub 上查看项目相关文档。

项目GitHub链接: https://github.com/pspgbhu/Vue2.x-Swipe-Mobile


c-swipe

npm package NPM downloads GitHub issues Travis

NPM

A swipe (touch slide) component for Vue2.x in mobile device. Only support touch event now.

一个简单的移动端卡片滑动轮播组件,适用于Vue2.x

c-swipe 2.0 全新归来。重写了全部的代码,更靠谱的质量,更优秀的性能

c-swipe

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="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-modelNumber0绑定了当前显示卡片的索引,该数据为双向绑定,可通过更改 v-model 的值直接更改当前显示卡片
paginationBooleantrue是否需要默认样式的导航器
loopBooleantrue循环切换
autoplayTimeNumber0单位 ms,自动切换卡片的时间间隔,值为 0 时不自动切换
speedNumber300单位 ms, 切换卡片时的过渡效果的播放时长
minMoveDistanceString‘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>

预览

用手机扫描下方二维码进行预览

c-swpie

反馈

如果你在使用中有任何疑问,遇见任何问题,或是有任何好的建议,都欢迎通过 issue 来反馈给我,我也一定会在第一时间答疑解惑,解决问题。

License

MIT

回到顶部