Я работаю над Vue, чтобы создать серию карточек, которые прокручиваются по экрану мобильного телефона в направлении оси x. Это что-то вроде раздела отзывов, где пользователь может прокручивать вправо или влево, чтобы увидеть новые отзывы.
Я могу применить левое поле к карточкам, однако я не могу добавить правое поле к последней карточке так, чтобы его можно было прокрутить в центр экрана.
Вот песочница кода: https://6ky1r.csb.app/ Обратите внимание, это разработано для мобильных устройств, но вы можете увидеть проблему на также на рабочем столе.
Когда вы прокручиваете до конца вправо, белый фон карты доходит до края, что нежелательно.
<template>
<div class="homePageTwo">
<div class="cardHolder">
<div class="cardSpace" v-for="card in cards" :key="card.index">
<SlidingCard :title="card.title" :content="card.content" :icon="card.icon"/>
</div>
</div>
</div>
</template>
<script>
import SlidingCard from "./SlidingCard.vue";
export default {
name: "App",
components: {
SlidingCard
},
data() {
return {
cards: [
{
title: "Food Services",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
{
title: "Assisted Living",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
{
title: "Retail",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
{
title: "Education",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
}
]
};
}
};
</script>
<style>
.homePageTwo {
height: 100vh;
background-color: #f7f8fc;
padding-top: 3rem;
}
.cardHolder {
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: mandatory;
scroll-snap-type: x mandatory;
}
.cardSpace {
padding: 2.5rem;
background-color: #ffffff;
margin-left: 1rem;
margin-right: 1rem;
}
</style>
<template>
<div class="slidingCard">
<div class="photoHolder">
<img class="homePageOneImg" :alt="alt" :src="icon">
</div>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</div>
</template>
<script>
export default {
name: "SlidingCard",
data() {
return {};
},
props: ["title", "content", "icon", "alt"]
};
</script>
<style scoped>
.slidingCard {
background-color: #ffffff !important;
width: 60vw;
display: inline-flex;
flex-direction: column;
position: relative;
scroll-snap-align: center;
}
.photoHolder {
height: 10rem;
line-height: 10rem;
border-radius: 90px;
background-color: #f7f8fc;
width: 8rem;
margin: auto;
}
img {
vertical-align: middle;
height: 75px;
width: 75px;
}
h1 {
font-size: 18px;
font-weight: bold;
}
p {
font-size: 1rem;
white-space: normal !important;
}
</style>