useCycleList

分类

实用工具

导出大小

444 B

上次更改

8 个月前

循环遍历列表项。

通过 Vue School 提供的免费视频课程，学习如何使用 useCycleList 创建图片轮播！

演示

源代码演练场 (测试版)

狗

用法

import { useCycleList
 } from '@vueuse/core'

const { state
, next
, prev
, go
 } = useCycleList
([
  'Dog',
  'Cat',
  'Lizard',
  'Shark',
  'Whale',
  'Dolphin',
  'Octopus',
  'Seal',
])

console
.log
(state
.value
) // 'Dog'

prev
()

console
.log
(state
.value
) // 'Seal'

go
(3)

console
.log
(state
.value
) // 'Shark'

类型声明

export interface UseCycleListOptions
<T
> {
  /**
   * The initial value of the state.
   * A ref can be provided to reuse.
   */
  initialValue
?: MaybeRef
<T
>
  /**
   * The default index when
   */
  fallbackIndex
?: number
  /**
   * Custom function to get the index of the current value.
   */
  getIndexOf
?: (value
: T
, list
: T
[]) => number
}
/**
 * Cycle through a list of items
 *
 * @see https://vueuse.org.cn/useCycleList
 */
export declare function useCycleList
<T
>(
  list
: MaybeRefOrGetter
<T
[]>,
  options
?: UseCycleListOptions
<T
>,
): UseCycleListReturn
<T
>
export interface UseCycleListReturn
<T
> {
  state
: ShallowRef
<T
>
  index
: WritableComputedRef
<number>
  next
: (n
?: number) => T

  prev
: (n
?: number) => T

  /**
   * Go to a specific index
   */
  go
: (i
: number) => T

}