Skip to content

Commit

Permalink
feat: 轮播图改版
Browse files Browse the repository at this point in the history
  • Loading branch information
@python-No2
python-No2 committed Dec 7, 2023
1 parent f35faad commit d1df824
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 129 deletions.
169 changes: 84 additions & 85 deletions src/pages/community/Carousel.vue
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,27 @@
<template>
<view class="carousel">
<view class="carousel-background" />
<view class="slides" @touchmove="touchEnd" @touchstart="touchStart">
<template v-for="i in 5" :key="i">
<view
:class="slidesStyle[i - 1]"
:style="{
<view class="carousel">
<view class="carousel-background" />
<view class="slides" @touchmove="touchEnd" @touchstart="touchStart">
<template v-for="i in 5" :key="i">
<view
:class="slidesStyle[i - 1]"
:style="{
backgroundImage: 'url(' + displayContents[i - 1].imageUrl + ')'
}"
@click="onClickCarousel(displayContents[i - 1])"
/>
</template>
@click="onClickCarousel(displayContents[i - 1])"
/>
</template>
<view class="pagination-dots">
<view
v-for="(content, index) in contents"
:key="index"
:class="
'pagination-dot ' + (index === currentContent ? 'current' : '')
"
/>
</view>
</view>
</view>
<view class="pagination-dots">
<view
v-for="(content, index) in contents"
:key="index"
:class="'pagination-dot ' + (index === currentContent ? 'current' : '')"
/>
</view>
</view>
</template>

<script lang="ts" setup>
Expand All @@ -28,83 +30,81 @@ import { News } from "@/apis/schemas";
import { onClickCarousel } from "@/pages/community/event";
const props = defineProps<{
contents: News[];
contents: News[];
}>();
const contents = reactive(props.contents);
let touchStartX: number;
let isSlidesMoving = false;
const touchStart = (ev: any) => {
touchStartX = ev.touches[0].clientX;
touchStartX = ev.touches[0].clientX;
};
const touchEnd = (ev: any) => {
if (!isSlidesMoving) {
if (ev.touches[0].clientX - touchStartX > 30) {
isSlidesMoving = true;
rightward();
setTimeout(() => (isSlidesMoving = false), 1000);
} else if (ev.touches[0].clientX - touchStartX < -30) {
isSlidesMoving = true;
leftward();
setTimeout(() => (isSlidesMoving = false), 1000);
if (!isSlidesMoving) {
if (ev.touches[0].clientX - touchStartX > 50) {
isSlidesMoving = true;
rightward();
setTimeout(() => (isSlidesMoving = false), 1000);
} else if (ev.touches[0].clientX - touchStartX < -50) {
isSlidesMoving = true;
leftward();
setTimeout(() => (isSlidesMoving = false), 1000);
}
}
}
};
setInterval(leftward, 5000);
const currentContent = ref(0);
const displayContents = reactive([
contents[(currentContent.value + contents.length - 2) % contents.length],
contents[(currentContent.value + contents.length - 1) % contents.length],
contents[currentContent.value],
contents[(currentContent.value + 1) % contents.length],
contents[(currentContent.value + 2) % contents.length]
contents[(currentContent.value + contents.length - 2) % contents.length],
contents[(currentContent.value + contents.length - 1) % contents.length],
contents[currentContent.value],
contents[(currentContent.value + 1) % contents.length],
contents[(currentContent.value + 2) % contents.length]
]);
const slidesStyle = reactive([
"slide slide-leftest",
"slide slide-left",
"slide slide-center",
"slide slide-right",
"slide slide-rightest"
"slide slide-leftest",
"slide slide-left",
"slide slide-center",
"slide slide-right",
"slide slide-rightest"
]);
function leftward() {
const index = (currentSlide.value + 1) % 5;
slidesStyle[(index + 3) % 5] = "slide slide-leftest";
slidesStyle[(index + 4) % 5] = "slide slide-left";
slidesStyle[index] = "slide slide-center";
slidesStyle[(index + 1) % 5] = "slide slide-right";
slidesStyle[(index + 2) % 5] = "slide slide-rightest";
currentSlide.value = index;
currentContent.value = (currentContent.value + 1) % contents.length;
displayContents[(index + 2) % 5] =
contents[(currentContent.value + contents.length + 2) % contents.length];
const index = (currentSlide.value + 1) % 5;
slidesStyle[(index + 3) % 5] = "slide slide-leftest";
slidesStyle[(index + 4) % 5] = "slide slide-left";
slidesStyle[index] = "slide slide-center";
slidesStyle[(index + 1) % 5] = "slide slide-right";
slidesStyle[(index + 2) % 5] = "slide slide-rightest";
currentSlide.value = index;
currentContent.value = (currentContent.value + 1) % contents.length;
displayContents[(index + 2) % 5] =
contents[(currentContent.value + contents.length + 2) % contents.length];
}
function rightward() {
const index = (currentSlide.value + 4) % 5;
slidesStyle[(index + 3) % 5] = "slide slide-leftest";
slidesStyle[(index + 4) % 5] = "slide slide-left";
slidesStyle[index] = "slide slide-center";
slidesStyle[(index + 1) % 5] = "slide slide-right";
slidesStyle[(index + 2) % 5] = "slide slide-rightest";
currentSlide.value = index;
currentContent.value =
(currentContent.value - 1 + contents.length) % contents.length;
displayContents[(index + 3) % 5] =
contents[(currentContent.value + contents.length - 2) % contents.length];
const index = (currentSlide.value + 4) % 5;
slidesStyle[(index + 3) % 5] = "slide slide-leftest";
slidesStyle[(index + 4) % 5] = "slide slide-left";
slidesStyle[index] = "slide slide-center";
slidesStyle[(index + 1) % 5] = "slide slide-right";
slidesStyle[(index + 2) % 5] = "slide slide-rightest";
currentSlide.value = index;
currentContent.value =
(currentContent.value - 1 + contents.length) % contents.length;
displayContents[(index + 3) % 5] =
contents[(currentContent.value + contents.length - 2) % contents.length];
}
const currentSlide = ref(2);
</script>

<style lang="scss" scoped>
$slideWidthLarge: calc(272 / 390 * 100vw);
$slideHeightLarge: calc(131 / 390 * 100vw);
$slideWidthSmall: calc(216 / 390 * 100vw);
$slideHeightSmall: calc(105 / 390 * 100vw);
$slideWidthLarge: calc(362 / 390 * 100vw);
$slideHeightLarge: calc(163 / 390 * 100vw);
$horizontalMarginOfSlideCenter: calc((100vw - $slideWidthLarge) / 2);
$verticalPaddingOfCarousel: calc(9 / 390 * 100vw);
$slideGap: calc(17 / 390 * 100vw);
Expand All @@ -120,6 +120,7 @@ $backgroundColor: #f5f5f5;
}
.slides {
overflow-x: hidden;
display: flex;
position: relative;
height: calc($slideHeightLarge + $verticalPaddingOfCarousel * 2);
Expand All @@ -132,47 +133,42 @@ $backgroundColor: #f5f5f5;
background-size: 100% 100%;
position: absolute;
width: $slideWidthSmall;
height: $slideHeightSmall;
top: calc(
($slideHeightLarge - $slideHeightSmall) / 2 + $verticalPaddingOfCarousel
);
width: $slideWidthLarge;
height: $slideHeightLarge;
top: $verticalPaddingOfCarousel;
transition-duration: $transitionDuration;
box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.25);
border-radius: 6px;
border-radius: 3px;
transition: transform 0.5s ease-in-out, z-index 0.5s ease-in-out;
}
.slide-leftest {
left: calc(
$horizontalMarginOfSlideCenter - ($slideWidthSmall + $slideGap) * 2
);
transform: translateX(-200%);
z-index: 0;
}
.slide-left {
left: calc($horizontalMarginOfSlideCenter - ($slideWidthSmall + $slideGap));
z-index: 2;
transform: translateX(-100%);
z-index: 1;
}
.slide-center {
transform: translateX(0);
left: $horizontalMarginOfSlideCenter;
width: $slideWidthLarge;
height: $slideHeightLarge;
z-index: 2;
top: $verticalPaddingOfCarousel;
z-index: 3;
}
.slide-right {
left: calc($horizontalMarginOfSlideCenter + ($slideWidthLarge + $slideGap));
z-index: 2;
transform: translateX(110%);
z-index: 1;
}
.slide-rightest {
left: calc(
$horizontalMarginOfSlideCenter + ($slideWidthLarge + $slideGap) +
($slideWidthSmall + $slideGap)
);
transform: translateX(200%);
z-index: 0;
}
Expand All @@ -181,19 +177,22 @@ $backgroundColor: #f5f5f5;
position: absolute;
width: 100vw;
height: calc($verticalPaddingOfCarousel * 2 + $slideHeightLarge);
z-index: 1;
z-index: 2;
}
.none {
display: none;
}
.pagination-dots {
background-color: #fafcff;
background-color: transparent;
padding: 0;
display: flex;
width: 100vw;
margin-top: 40vw;
margin-left: -35vw;
justify-content: center;
z-index: 99;
}
.pagination-dot {
Expand Down
44 changes: 0 additions & 44 deletions src/pages/community/CarouselTest.vue
View file

This file was deleted.

0 comments on commit d1df824

Please sign in to comment.