@loickit-v/swiper

中文

Components

LSlide

The Slide Component

Props

• name
  A unique identifier for the slide, which should be obtained via defineSlide.
• list <Array>
  Only takes effect in infinite mode; enables automatic cached rendering.
• loadMore <Function>
  Only takes effect in infinite mode; triggered when the sliding pointer reaches the end of the list.

LSlideItem

The Slide Item Component

Props

• index <number> optional
  Must be passed in infinite mode, used for dynamic rendering calculations.

Hooks

defineSlide

Defines a slide

Parameters:

• provideKey <string>
  Sets a unique identifier for the current slide.

Returns:
[createSlide, useSlide]

• createSlide
  Creates a slide state; its return value is used to register the l-slide component.

  Parameters:

  • initial <SlideState>
  • direction <SLIDE_DIRECTION> optional
    Sliding direction
    Default value: SLIDE_DIRECTION.HORIZONTAL
  • currentIndex <number> optional
    Pointer
    Default value: 0
  • duration <number> optional
    Animation duration for slide switching
    Default value: 300 (ms)
  • infinite <boolean> optional
    Whether to enable infinite mode
    Default value: false

  Returns:

  • name
    A unique identifier for the slide, which should be assigned to the name prop of l-slide.
  • state <SlideState>
    The slide state

• useSlide
  Returns: <SlideState>
  Use it to get the current slide state in any child component.

Slot

default

• cacheList
  Only takes effect in infinite mode; caches the list data.

Usage

<script setup lang="ts">
import {
    defineSlide,
    LSlide,
    LSlideItem,
    SLIDE_DIRECTION,
    type SlideSwitchEvent
} from '@loickit-v/swiper';
import '@loickit-v/swiper/style';
import { reactive } from 'vue';

const handleSwitch = (value: SlideSwitchEvent) => {
    console.log(value);
};

const [createSlide] = defineSlide('one');
const oneSlide = createSlide({
    currentIndex: 1
});

const [createSlide2] = defineSlide('two');
const twoSlide = createSlide2({
    direction: SLIDE_DIRECTION.VERTICAL
});
const oneToTwo = () => {
    oneSlide.state.currentIndex = 1;
};
const list = reactive([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }]);
const onLoadMore = () => {
    list.push({ id: list[list.length - 1].id + 1 });
};
</script>

<template>
    <div style="position: fixed; bottom: 0; left: 0; z-index: 999">
        <p>one currentIndex: {{ oneSlide.state.currentIndex }}</p>
        <p>two currentIndex: {{ twoSlide.state.currentIndex }}</p>

        <button @click="oneToTwo">click to two "HORIZONTAL-2"</button>
    </div>
    <LSlide :name="oneSlide.name" @switch="handleSwitch">
        <LSlideItem style="background-color: red; width: 30%">
            <h1>HORIZONTAL-1</h1>
        </LSlideItem>
        <LSlideItem style="background-color: blue">
            <h1>HORIZONTAL-2</h1>
        </LSlideItem>
        <LSlideItem style="background-color: green">
            <LSlide
                infinite
                :name="twoSlide.name"
                :list="list"
                :load-more="onLoadMore"
                @switch="handleSwitch"
            >
                <template #="{ cacheList }">
                    <LSlideItem
                        v-for="(item, idx) in cacheList"
                        :key="item.id"
                        :index="idx"
                    >
                        <h1>INFINITE-VERTICAL</h1>
                        <h2>{{ item.id }}</h2>
                    </LSlideItem>
                </template>
            </LSlide>
        </LSlideItem>
    </LSlide>
</template>

<style lang="scss">
body,
#app {
    background-color: #ccc;
    height: 800px;
    width: 800px;
}
</style>