2

我正在尝试制作 vuetify 列表元素的可滑动版本。我发现 swiperjs.com 库在为 html 元素添加滑动功能方面做得非常出色。我还发现了这个项目https://github.com/davidgaroro/vuetify-swipeout，它集成了 vuetify 库和 swipeable 库。阅读了 vuetify-swipeout 项目的内容后，看起来诀窍只是在 v-list-tile 组件上设置正确的类，即

 <v-list-tile class="swiper-slide">

同时用

<div :id="id" class="swiper-container">
    <div class="swiper-wrapper">
      ...
    </div>
</div>

该演示在 github 站点上运行良好。

然而，技巧来了，因为当前版本的 vuetify 不再支持 v-list-tile，我用 v-list-item 替换了所有 v-list-tile - 我希望它是等效的 - 但它是不是，所有的 v-list-items 都被翻译到左边，直到你在不滑动的情况下无法在屏幕上看到它们。

因此，不是隐藏可交换内容并显示主要内容，而是将整个内容翻译到左侧，使图块对屏幕不可见。

如果您能帮我理解我做错了什么，我将不胜感激。

谢谢并恭祝安康，

拍

4

1 回答 1

2

我使用以下组件或多或少地让它工作：

<!-- components/VSwipable.vue -->

<template>
    <div ref="container" class="swiper-container">
        <div class="swiper-wrapper">
            <div v-if="swipeRight" class="swiper-slide">
                <slot name="right-content"/>
            </div>
            <div class="swiper-slide">
                <slot/>
            </div>
            <div v-if="swipeLeft" class="swiper-slide">
                <slot name="left-content"/>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import Swiper, { SelectableElement } from 'swiper';
    import 'swiper/css/swiper.css';
    import Vue from 'vue';

    export default Vue.extend({
        mounted() {
            const swiper = new Swiper(this.$refs.container as SelectableElement, {
                initialSlide: this.swipeRight ? 1 : 0,
                resistanceRatio: 0,
                speed: 150,
            });

            swiper.on('transitionEnd', () => {
                // slide index  swipe mode
                //   0   1       R
                //   0   1   2   R   L
                //       0   1   L
                switch (true) {
                    case this.swipeRight && swiper.activeIndex === 0:
                        this.$emit('swipedRight');
                        break;
                    case this.swipeRight && swiper.activeIndex === 2:
                        this.$emit('swipedLeft');
                        break;
                    case !this.swipeRight && swiper.activeIndex === 1:
                        this.$emit('swipedLeft');
                        break;
                    default:
                }


                switch (swiper.activeIndex) {
                    case 0:
                        this.$emit('swipedRight');
                        break;
                    case 2:
                        this.$emit('swipedLeft');
                        break;
                    default:
                }
            });
        },
        props: {
            swipeLeft: Boolean,
            swipeRight: Boolean,
        },
    });
</script>

以及示例用法：

<template>
    <v-container>
        <v-list>
            <template v-for="item in items">

                <!-- swipe-left enablesleft swiping (you can also use swipe-right), it supports two events: swipedLeft and swipedRight -->
                <v-swipable :key="item" swipe-left>

                    <!-- inject a red list item in the left slide -
                         you can also inject buttons and stuff,
                         use right-content for the right one -->
                    <v-list-item class="error" slot="left-content"/>

                    <v-list-item :value="item">
                        <v-list-item-content>
                            <v-list-item-title v-text="item"/>
                            <v-list-item-subtitle v-text="`Some details about ${item}`"/>
                        </v-list-item-content>
                    </v-list-item>

                </v-swipable>

            </template>
        </v-list>
    </v-container>
</template>

<script lang="ts">
    import VSwipable from '@/components/VSwipable.vue';

    export default Vue.extend({
        data: () => ({
            items: ['Item 1', 'Item 2', 'Item 3']
        }),
        components: {
            VSwipable,
        },
    });
</script>
于 2020-06-02T09:15:28.303 回答