04a7acc8b3
replace outdated overflow-x-autoshow-scrollbar prop with scroll-x and show-scrollbar="false" to enable proper horizontal scrolling and hide the scrollbar
66 lines
1.9 KiB
Vue
66 lines
1.9 KiB
Vue
<template>
|
|
<view class="explore-cards">
|
|
<scroll-view class="explore-scroll" scroll-x show-scrollbar="false">
|
|
<view class="explore-track">
|
|
<view v-for="(item, index) in normalizedList" :key="getItemKey(item, index)" class="explore-card"
|
|
:class="`is-${item.tone}`" hover-class="is-pressed" hover-stay-time="80"
|
|
@tap="handleCardTap(item.raw, index)">
|
|
<image v-if="item.coverImage" class="explore-card-image" :src="item.coverImage" mode="aspectFill" />
|
|
|
|
<view class="explore-card-gradient" />
|
|
|
|
<view class="explore-card-content">
|
|
<text class="explore-card-tag truncate">{{ item.tag }}</text>
|
|
<text class="explore-card-title truncate">{{ item.title }}</text>
|
|
<text v-if="item.subTitle" class="explore-card-desc truncate">
|
|
{{ item.subTitle }}
|
|
</text>
|
|
</view>
|
|
|
|
<view class="explore-card-arrow">
|
|
<text>→</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from "vue";
|
|
|
|
const props = defineProps({
|
|
list: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["didSelectItem"]);
|
|
|
|
const FALLBACK_TAGS = ["MUST VISIT", "CULTURE", "ADVENTURE", "NIGHTLIFE"];
|
|
const TONES = ["default", "culture", "adventure", "nightlife"];
|
|
|
|
const normalizedList = computed(() =>
|
|
props.list.map((item, index) => ({
|
|
raw: item,
|
|
id: item.id ?? item.tabContentId,
|
|
title: item.title || "",
|
|
subTitle: item.subTitle || "",
|
|
tag: item.tag || FALLBACK_TAGS[index % FALLBACK_TAGS.length],
|
|
coverImage: item.coverImage || "",
|
|
tone: TONES[index % TONES.length],
|
|
}))
|
|
);
|
|
|
|
const getItemKey = (item, index) => item.id ?? item.title ?? index;
|
|
|
|
const handleCardTap = (item, index) => {
|
|
emit("didSelectItem", item, index);
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "./styles/index.scss";
|
|
</style>
|