@ophiuchus/swipe v1.0.1

Swipe 轮播

介绍

用于循环播放一组图片或内容。

引入

// 方式1（推荐）
import Vue from 'vue';
import Swipe from '@ophiuchus/swipe';

Vue.use(Swipe);

// 方式2
import Vue from 'vue';
import { Swipe, SwipeItem } from '@ophiuchus/swipe';

Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

代码演示

基础用法

每个 SwipeItem 代表一张轮播卡片，可以通过 autoplay 属性设置自动轮播的间隔。

<sf-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <sf-swipe-item>1</sf-swipe-item>
  <sf-swipe-item>2</sf-swipe-item>
  <sf-swipe-item>3</sf-swipe-item>
  <sf-swipe-item>4</sf-swipe-item>
</sf-swipe>

<style>
  .my-swipe .sf-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>

图片懒加载

当 Swipe 中含有图片时，可以配合 Lazyload 组件实现图片懒加载。

<sf-swipe :autoplay="3000">
  <sf-swipe-item v-for="(image, index) in images" :key="index">
    <img v-lazy="image" />
  </sf-swipe-item>
</sf-swipe>

import Vue from 'vue';
import Lazyload from '@ophiuchus/lazyload';

Vue.use(Lazyload);

export default {
  data() {
    return {
      images: [
        'https://img4.tuhu.org/JU_d6bTpbt6kxlAcmNKCew_w660_h520.jpeg',
        'https://img4.tuhu.org/4sVmt9tW6ZR89aBswsUhfA_w1600_h1295.jpeg',
      ],
    };
  },
};

监听 change 事件

<sf-swipe @change="onChange">
  <sf-swipe-item>1</sf-swipe-item>
  <sf-swipe-item>2</sf-swipe-item>
  <sf-swipe-item>3</sf-swipe-item>
  <sf-swipe-item>4</sf-swipe-item>
</sf-swipe>

import Toast from '@ophiuchus/toast';

export default {
  methods: {
    onChange(index) {
      Toast('当前 Swipe 索引：' + index);
    },
  },
};

纵向滚动

设置 vertical 属性后滑块会纵向排列，此时需要指定滑块容器的高度。

<sf-swipe style="height: 200px;" vertical>
  <sf-swipe-item>1</sf-swipe-item>
  <sf-swipe-item>2</sf-swipe-item>
  <sf-swipe-item>3</sf-swipe-item>
  <sf-swipe-item>4</sf-swipe-item>
</sf-swipe>

自定义滑块大小

滑块默认宽度为 100%，可以通过 width 属性设置单个滑块的宽度。纵向滚动模式下，可以通过 height 属性设置单个滑块的高度。

<sf-swipe :loop="false" :width="300">
  <sf-swipe-item>1</sf-swipe-item>
  <sf-swipe-item>2</sf-swipe-item>
  <sf-swipe-item>3</sf-swipe-item>
  <sf-swipe-item>4</sf-swipe-item>
</sf-swipe>

目前不支持在循环滚动模式下自定义滑块大小，因此需要将 loop 设置为 false。

自定义指示器

通过 indicator 插槽可以自定义指示器的样式。

<sf-swipe @change="onChange">
  <sf-swipe-item>1</sf-swipe-item>
  <sf-swipe-item>2</sf-swipe-item>
  <sf-swipe-item>3</sf-swipe-item>
  <sf-swipe-item>4</sf-swipe-item>
  <template #indicator>
    <div class="custom-indicator">{ { current + 1 } }/4</div>
  </template>
</sf-swipe>

<style>
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
</style>

export default {
  data() {
    return {
      current: 0,
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
  },
};

API

Swipe Props

Swipe Events

SwipeItem Events

Swipe 方法

通过 ref 可以获取到 Swipe 实例并调用实例方法，详见组件实例方法。

swipeTo Options 格式

Swipe Slots

样式变量

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考主题定制。

常见问题

滑动轮播时为什么触发了 click 事件？

这种情况通常是由于项目中引入了fastclick库导致的。fastclick的原理是通过 Touch 事件模拟出 click 事件，而 Swipe 内部默认会阻止 touchmove 事件冒泡，干扰了 fastclick 的判断，导致出现这个问题。

将 Swipe 组件的 stop-propagation 属性设置为 false 即可避免该问题。

在桌面端无法操作组件？

参见桌面端适配。

Swipe 组件功能太少，无法实现复杂效果？

Ophiuchus 中的 Swipe 组件是比较轻量的，因此功能也比较基础。如果需要更复杂的轮播效果，推荐使用社区里一些优质的轮播库，比如 vue-awesome-swiper。

组件从隐藏状态切换到显示状态时，无法正确渲染？

Swipe 组件在挂载时，会获取自身的宽度，并计算出轮播图的位置。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法正确计算位置。

解决方法

方法一，如果是使用 v-show 来控制组件展示的，则替换为 v-if 即可解决此问题：

<!-- Before -->
<sf-swipe v-show="show" />
<!-- After -->
<sf-swipe v-if="show" />

方法二，调用组件的 resize 方法来主动触发重绘：

<sf-swipe v-show="show" ref="swipe" />

this.$refs.swipe.resize();