Skip to content

useCycleList

循环浏览项目列表。

¥Cycle through a list of items.

通过 Vue School 的免费视频课程了解如何使用 useCycleList 创建图片轮播!

示例

Dog

用法

¥Usage

ts
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'

类型声明

ts
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/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
}

源代码

源代码示例文档

变更日志

最近没有更改