# fold-scroll

> 基于vue2.x的H5横向折叠滑动组件样式实现 * 滑动过程伴随伸缩和透明度变化 * 支持阈值内滑动复位

Latest version **0.1.2** (published 2021-10-02) · 0 weekly downloads

## Install

```sh
npm install fold-scroll
pnpm add fold-scroll
yarn add fold-scroll
bun add fold-scroll
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2021-10-02 |
| First published | 2021-07-18 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 6.4 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | zhuaba |

## Links

- npm: https://www.npmjs.com/package/fold-scroll
- npm.io page: https://npm.io/package/fold-scroll

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.5

## Recent versions

- 0.1.2 (latest) — 2021-10-02
- 0.1.1 — 2021-10-02
- 0.1.0 — 2021-07-18

## README

# fold-scroll
基于vue2.x的H5横向折叠滑动组件样式实现
* 滑动过程伴随伸缩和透明度变化
* 支持阈值内滑动复位

### intro
fold-scroll 提供了一个折叠滑动的容器，可以通过暴露出来的 slot（#0～n）进行内容填充展示


<figure class="third">
  <img src="./public/leimu.gif" width="370"/>
</figure>


### Usage Example
In your project, you can import fold-scroll package with npm or yarn
```js
npm i fold-scroll / yarn add fold-scroll
```

```vue
<FoldScroll :cardNum="5" :cardWidth="260" :slideThreshold="100">
  <!-- 在不同的 slot 中放入你想展示的内容 -->
  <template v-for="(item, idx) in cardList" :slot="idx">
    <div
      class="demo-item"
      :key="idx"
      :style="{ backgroundColor: getColor(idx) }"
    >
    </div>
  </template>
</FoldScroll>

<script>
import FoldScroll from 'fold-scroll'

export default {
  components: {
    FoldScroll,
  },
  data() {
    return {
      cardList: [{}, {}, {}, {}, {}]
    }
  },
  methods: {
    getColor(idx) {
      let color = ['#e0e0e0', '#ffe0e0', '#e0ffe0', '#e0e0ff']
      return color[idx] ?? this.getColor(idx - 4)
    }
  }
}
</script>
```


### Props

| 参数 | 说明 | 类型 | 默认值 | 必选 | 可选值 |
| --- | --- | --- | --- | --- | --- |
| cardNum | 传入的卡片数量 | number | true | N | - |
| cardWidth | 卡片的宽度 | number | false | N | 建议大于屏幕宽度的一半 |
| slideThreshold | 滑动阈值（超过该距离阈值则进行折叠，不超过则复原） | number | false | N | - |

### Events

| 事件 | 说明 | 参数 |
| --- | --- | --- |
| triggerThreshold | 滑动到阈值的时候触发该事件 | {currentIndex, direction} 触发滑动时的卡片序号， 滑动方向（-1为左， 1为右） |
| triggerSlideLeft | 触发左滑折叠时触发该事件 | currentIndex 触发滑动时的卡片序号 |
| triggerSlideRight | 触发右滑折叠时触发该事件 | currentIndex 触发滑动时的卡片序号 |

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