fold-scroll

fold-scroll

基于vue2.x的H5横向折叠滑动组件样式实现

• 滑动过程伴随伸缩和透明度变化
• 支持阈值内滑动复位

intro

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

Usage Example

In your project, you can import fold-scroll package with npm or yarn

npm i fold-scroll / yarn add fold-scroll

<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

Events