73 lines
1.8 KiB
Vue
73 lines
1.8 KiB
Vue
<template>
|
|
<view class="image-swiper">
|
|
<swiper
|
|
class="swiper-box"
|
|
:autoplay="false"
|
|
:interval="3000"
|
|
:duration="1000"
|
|
:current="active"
|
|
>
|
|
<swiper-item
|
|
class="swiper-item"
|
|
v-for="(item, index) in thumbnails"
|
|
:key="index"
|
|
>
|
|
<image :src="item.url" mode="aspectFill"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<view class="custom-indicator">
|
|
图片{{ active + 1 }}/{{ thumbnails.length }}
|
|
</view>
|
|
|
|
<view class="thumbnail-box">
|
|
<view
|
|
v-for="(thumb, index) in thumbnails"
|
|
:key="index"
|
|
class="thumbnail-item"
|
|
@click="handleThumbnailClick(index)"
|
|
>
|
|
<image :src="thumb.url" mode="aspectFill"></image>
|
|
<text>{{ thumb.description }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
|
|
const active = ref(0);
|
|
|
|
const thumbnails = ref([
|
|
{
|
|
url: "https://fastly.picsum.photos/id/866/654/400.jpg?hmac=z3vI4CYrpnXEgimSlJCDwXRxEa-UDHiRwzGEyB8V-po",
|
|
description: "瑶山古寨",
|
|
},
|
|
{
|
|
url: "https://fastly.picsum.photos/id/284/654/400.jpg?hmac=89XRCJxYTblKIFGLOp6hJ9U0GC8BQrcnJwE5pG21NAk",
|
|
description: "民俗表演",
|
|
},
|
|
{
|
|
url: "https://fastly.picsum.photos/id/281/654/400.jpg?hmac=hcAJB7y2Xz3DVuz6S4XeQZgzaTJ_QWnxtbnaagZL6Fs",
|
|
description: "特色美食",
|
|
},
|
|
{
|
|
url: "https://fastly.picsum.photos/id/435/654/400.jpg?hmac=TSVDxfo-zXbunxNQK0erSG_nmKcS20xfhbQsCAXLlHo",
|
|
description: "传统服饰",
|
|
},
|
|
{
|
|
url: "https://fastly.picsum.photos/id/737/654/400.jpg?hmac=VED05oEK3XB0Aa_DUVoZjTAf0bHjAmNYyJky4lq5vVo",
|
|
description: "其他",
|
|
},
|
|
]);
|
|
|
|
const handleThumbnailClick = (index) => {
|
|
active.value = index;
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "./styles/index.scss";
|
|
</style>
|