useCycleList

类别

Utilities

导出体积

463 B

上次更改

2 minutes ago

循环遍历一个项目列表。

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

示例

源码

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'

类型声明

typescript

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: Ref<T>
  index: Ref<number>
  next: (n?: number) => T
  prev: (n?: number) => T
  /**
   * Go to a specific index
   */
  go: (i: number) => T
}