useCycleList

类别

Utilities

导出体积

444 B

上次更改

7 months ago

循环遍历一个项目列表。

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

示例

源码 playground (beta)

Dog

用法

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
> {
  /**
   * 状态的初始值。
   * 可以提供一个 ref 来重用。
   */
  initialValue
?: MaybeRef
<T
>
  /**
   * 当找不到索引时的默认索引。
   */
  fallbackIndex
?: number
  /**
   * 获取当前值的索引的自定义函数。
   */
  getIndexOf
?: (value
: T
, list
: T
[]) => number
}
/**
 * 循环浏览列表
 *
 * @see https://vueuse.org/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

}