50 lines
1.2 KiB
Vue
50 lines
1.2 KiB
Vue
<template>
|
|
<swiper-container ref="swiperEl" pagination="true">
|
|
<swiper-slide
|
|
v-for="image in images"
|
|
lazy
|
|
>
|
|
<img
|
|
:src="image.url"
|
|
:alt="image.alt"
|
|
loading="lazy"
|
|
/>
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {onMounted, ref} from "vue";
|
|
|
|
const props = defineProps({
|
|
images: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
});
|
|
|
|
const swiperEl = ref(null);
|
|
|
|
let haptic = true;
|
|
|
|
onMounted(async () => {
|
|
swiperEl.value?.addEventListener('swiperactiveindexchange', (event) => {
|
|
window.Telegram.WebApp.HapticFeedback.selectionChanged();
|
|
});
|
|
|
|
swiperEl.value?.addEventListener('swiperprogress', (num) => {
|
|
if (haptic === false) return;
|
|
window.Telegram.WebApp.HapticFeedback.impactOccurred('light');
|
|
haptic = false;
|
|
setTimeout(() => haptic = true, 50);
|
|
});
|
|
|
|
swiperEl.value?.addEventListener('swiperreachbeginning', (event) => {
|
|
window.Telegram.WebApp.HapticFeedback.impactOccurred('medium');
|
|
});
|
|
swiperEl.value?.addEventListener('swiperreachend', (event) => {
|
|
window.Telegram.WebApp.HapticFeedback.impactOccurred('medium');
|
|
});
|
|
});
|
|
</script>
|