在 vuetify 列表项中滑动
Swipe in vuetify list items
我正在尝试制作 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 站点上运行良好。
然而,诀窍来了,因为 v-list-tile 不再被当前版本的 vuetify 支持,我用 v-list-item 替换了所有 v-list-tile - 我希望如此等效 - 但事实并非如此,所有 v-list-items 都会向左移动,直到您不滑动就无法在屏幕上看到它们。
因此,不是隐藏可交换内容并显示主要内容,而是将整个内容平移到左侧,使磁贴在屏幕上不可见。
如果你能帮助我理解我做错了什么,我将不胜感激。
感谢和问候,
帕特
我或多或少地使用了以下组件:
<!-- 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>
我正在尝试制作 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 站点上运行良好。
然而,诀窍来了,因为 v-list-tile 不再被当前版本的 vuetify 支持,我用 v-list-item 替换了所有 v-list-tile - 我希望如此等效 - 但事实并非如此,所有 v-list-items 都会向左移动,直到您不滑动就无法在屏幕上看到它们。
因此,不是隐藏可交换内容并显示主要内容,而是将整个内容平移到左侧,使磁贴在屏幕上不可见。
如果你能帮助我理解我做错了什么,我将不胜感激。
感谢和问候,
帕特
我或多或少地使用了以下组件:
<!-- 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>