# @wenye123/vue-swipe

> 一个基于vue2.0的swipe库

Latest version **0.1.3** (published 2025-04-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @wenye123/vue-swipe
pnpm add @wenye123/vue-swipe
yarn add @wenye123/vue-swipe
bun add @wenye123/vue-swipe
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2025-04-16 |
| First published | 2021-09-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 64.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | wenye |
| Maintainers | wenye123 |
| Keywords | typescript, vue-swipe, vue2, vue, swipe |

## Links

- npm: https://www.npmjs.com/package/@wenye123/vue-swipe
- Repository: https://github.com/wenye123/vue-swipe
- Issues: https://github.com/wenye123/vue-swipe/issues
- npm.io page: https://npm.io/package/@wenye123/vue-swipe

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [vue-class-component](https://npm.io/package/vue-class-component.md) ^7.2.3
- [vue-property-decorator](https://npm.io/package/vue-property-decorator.md) ^9.1.2

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.1.3 (latest) — 2025-04-16
- 0.1.2 — 2021-10-08
- 0.1.1 — 2021-09-28
- 0.1.0 — 2021-09-28

## README

一个基于 vue2 的 swipe 库

#### demo

![demo](https://cdn.wenye123.com/blog/202304042348200.png)

#### script加载例子

```html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
    />
    <title>测试</title>
    <style>
      .my-swipe {
        width: 300px;
        height: 138px;
        margin: 30px auto 0 auto;
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <swipe class="my-swipe">
        <swipe-item v-for="(pic, index) in pics" :key="index">
          <img :src="pic" alt="" />
        </swipe-item>
      </swipe>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@wenye123/vue-swipe@latest/dist/swipe.js"></script>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@wenye123/vue-swipe@latest/dist/swipe.css"
  />
  <script>
    const { Swipe, SwipeItem } = window["vue-swipe"];
    new Vue({
      el: "#app",
      components: { swipe: Swipe, "swipe-item": SwipeItem },
      data() {
        return {
          pics: [
            "../2020-10/img/1.jpg",
            "../2020-10/img/2.jpg",
            "../2020-10/img/3.jpg",
            "../2020-10/img/4.jpg",
          ],
        };
      },
    });
  </script>
</html>
```

#### npm安装

install 

```bash
npm i -S @wenye123/vue-swipe
```

使用例子

```html
<template>
  <div id="app">
    <Swipe
      class="my-swipe"
      :initIndex="currIndex"
      :showIndicator="true"
      ref="mySwipe"
      @change="change"
    >
      <SwipeItem v-for="(pic, index) in pics" :key="index">
        <img :src="pic" alt="" />
      </SwipeItem>
    </Swipe>

    <div class="tool">
      <span>{{ currIndex }}</span>
      <button @click="prev">上一页</button>
      <button @click="next">下一页</button>
      <button @click="redirectTo(3)">跳转到第四页</button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
const { Swipe, SwipeItem } = require("@wenye123/vue-swipe");
import "@wenye123/vue-swipe/dist/swipe.css";

@Component({
  components: { Swipe, SwipeItem },
})
export default class App extends Vue {
  $refs!: {
    mySwipe: any;
  };

  /** 当前索引 */
  currIndex = 1;
  /** 切换图片 */
  pics = [
    require("@/assets/1.jpg"),
    require("@/assets/2.jpg"),
    require("@/assets/3.jpg"),
    require("@/assets/4.jpg"),
  ];

  change(index: number) {
    this.currIndex = index;
  }
  prev() {
    this.$refs.mySwipe.prev();
  }
  next() {
    this.$refs.mySwipe.next();
  }
  redirectTo(index: number) {
    this.$refs.mySwipe.redirectTo(index);
  }
}
</script>

<style>
.my-swipe {
  width: 300px;
  height: 138px;
  margin: 30px auto 0 auto;
  background-color: #ccc;
}
.tool {
  margin-top: 30px;
  text-align: center;
}
.tool span,
.tool button {
  margin-right: 5px;
}
</style>
```

### Props

| 属性                 | 说明                                                         | 默认      |
| -------------------- | ------------------------------------------------------------ | --------- |
| initIndex            | 默认展示索引值                                               | 0         |
| loop                 | 是否循环模式                                                 | *true*    |
| autoPlay             | 是否自动播放                                                 | *false*   |
| interval             | 自动播放时候的切换间隔                                       | 2000      |
| slideTime            | 切换时长                                                     | 500       |
| threshold            | 滑动距离超过该阈值才会触发切换，值为0-1表示百分比，整数表示像素 | 0.3       |
| showIndicator        | 是否显示指示器                                               | *false*   |
| indicatorClick       | 指示器是否可点击切换                                         | *true*    |
| indicatorColor       | 指示器默认颜色                                               | \#fff     |
| indicatorActiveColor | 指示器激活后颜色                                             | cadetblue |

#### 事件

| 名称   | 描述             | 参数                |
| ------ | ---------------- | ------------------- |
| change | 切换item时候触发 | index: item的索引值 |

#### 方法

| 方法                      | 描述                               |
| ------------------------- | ---------------------------------- |
| prev()                    | 上一页                             |
| next()                    | 下一页                             |
| redirectTo(index: number) | 跳转到指定item，参数为item的索引值 |

---
_Source: https://npm.io/package/@wenye123/vue-swipe · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
