fix pages swiping

This commit is contained in:
ThatOneCalculator 2022-11-12 13:38:28 -08:00
parent d5fbd8ca0c
commit 1d0fcee862
3 changed files with 14 additions and 3 deletions

View file

@ -1,6 +1,6 @@
{ {
"name": "calckey", "name": "calckey",
"version": "12.119.0-calc.12.9", "version": "12.119.0-calc.12.10",
"codename": "aqua", "codename": "aqua",
"repository": { "repository": {
"type": "git", "type": "git",

View file

@ -38,7 +38,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, watch } from 'vue'; import { computed, watch, onMounted } from 'vue';
import { Virtual } from 'swiper'; import { Virtual } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue'; import { Swiper, SwiperSlide } from 'swiper/vue';
import XFeatured from './explore.featured.vue'; import XFeatured from './explore.featured.vue';
@ -118,4 +118,8 @@ function syncSlide(index) {
swiperRef.slideTo(index); swiperRef.slideTo(index);
} }
onMounted(() => {
syncSlide(tabs.indexOf(swiperRef.activeIndex));
});
</script> </script>

View file

@ -38,7 +38,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, inject } from 'vue'; import { computed, watch, onMounted } from 'vue';
import { Virtual } from 'swiper'; import { Virtual } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue'; import { Swiper, SwiperSlide } from 'swiper/vue';
import MkPagePreview from '@/components/MkPagePreview.vue'; import MkPagePreview from '@/components/MkPagePreview.vue';
@ -56,6 +56,7 @@ const router = useRouter();
let tab = $ref('featured'); let tab = $ref('featured');
const tabs = ['featured', 'my', 'liked']; const tabs = ['featured', 'my', 'liked'];
watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
const featuredPagesPagination = { const featuredPagesPagination = {
endpoint: 'pages/featured' as const, endpoint: 'pages/featured' as const,
@ -101,6 +102,8 @@ definePageMetadata(computed(() => ({
let swiperRef = null; let swiperRef = null;
let swiperRef = null;
function setSwiperRef(swiper) { function setSwiperRef(swiper) {
swiperRef = swiper; swiperRef = swiper;
syncSlide(tabs.indexOf(tab)); syncSlide(tabs.indexOf(tab));
@ -113,6 +116,10 @@ function onSlideChange() {
function syncSlide(index) { function syncSlide(index) {
swiperRef.slideTo(index); swiperRef.slideTo(index);
} }
onMounted(() => {
syncSlide(tabs.indexOf(swiperRef.activeIndex));
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>