UFUse（1.6.2）

Appearance

On this page

InfiniteSwipe ​

InfiniteSwipe 组件可以实现一个列表无限加载数据并向上滑动展示

依赖项：gsap

预览 ​

使用 ​

vue
<script setup lang="ts">
import InfiniteSwipe from 'ufuse/src/components/InfiniteSwipe/index.vue'
import { ref } from 'vue'
import Chance from 'chance'

const chance = new Chance()
const list = ref(Array.from({ length: 10 }, () => createRowData()))
const list2 = ref(Array.from({ length: 10 }, () => createRowData()))

function handleNext() {
  return [createRowData()]
}

function createRowData() {
  return {
    id: chance.string({ length: 5 }),
    label: chance.name(),
  }
}
</script>

<template>
  <div class="demo flex">
    <InfiniteSwipe
      v-model="list"
      class="flex-1 h-[300px]"
      pause-on-hover
      :on-more="handleNext"
    >
      <div v-for="item in list" :key="item.id" class="h-[30px] leading-[30px]">
        {{ item.label }}
      </div>
    </InfiniteSwipe>
    <InfiniteSwipe
      v-model="list2"
      :interval="1000"
      class="flex-1 h-[300px]"
      :on-more="handleNext"
    >
      <div v-for="item in list2" :key="item.id" class="h-[30px] leading-[30px]">
        {{ item.label }}
      </div>
    </InfiniteSwipe>
  </div>
</template>

API ​

ts
export interface InfiniteSwipeProps {
  modelValue: unknown[]
  /**
   * 是否禁用
   */
  disabled?: boolean
  /**
   * 每次加载数据的间隔时间，单位：毫秒
   * @default 0
   */
  interval?: number
  /**
   * 每一次移动时持续时间，单位：毫秒
   * @default 1000
   */
  duration?: number
  /**
   * 是否在 hover 容器时暂停滚动
   * @default false
   */
  pauseOnHover?: boolean
  /**
   * 加载更多数据
   */
  onMore: () => unknown[]
}

export interface InfiniteSwipeEvents {
  (e: 'update:modelValue', value: unknown[]): void
  /**
   * 每次开始滑动时触发
   */
  (e: 'swipe'): void
}

贡献者 ​

xieyuhang