案例
<template>
<view class="slider">
<swiper autoplay interval="2000" circular indicator-dots indicator-color="rgba(255,255,255,1)"
indicator-active-color="rgba(255,255,255,.6)">
<swiper-item v-for="(item) in swipers " :key="(item as Swipers).goods_id">
<navigator :url="`/packone/goods/index?id=${(item as Swipers).goods_id}`">
<image :src="(item as Swipers).image_src" />
</navigator>
</swiper-item>
</swiper>
</view>
<!-- 功能导航 -->
<view class="navs">
<navigator v-for=" item in navs " :key="item.name"
:url="item.navigator_url ? '/pages/category/index' : '/packone/list/index?query=' + item.name">
<image :src="item.image_src" />
</navigator>
</view>
<!-- 栏目楼层 -->
<view class="floors">
<!-- 1 -->
<view class="floor" v-for=" item in floors " :key="item.index">
<!-- title -->
<view class="ftitle">
<image :src="item.floor_title.image_src" />
</view>
<!-- pics -->
<view class="fitem">
<navigator url v-for=" item2 in item.product_list " :key="item2.index">
<image :src="item2.image_src" />
</navigator>
</view>
</view>
</view>
</template>
<script setup lang="ts">
interface Swipers {
goods_id: number
image_src: string
}
interface NavItem {
name: string;
navigator_url?: string;
image_src: string;
}
interface ProductListItem {
index: number;
image_src: string;
}
interface floors {
index: number
floor_title: {
name: string
image_src: string
}
product_list: ProductListItem[]
}
const swipers = ref([])//轮播图数据
const navs = ref<NavItem[]>([]) //导航
const floors = ref<floors[]>([])//商品楼层数据
</script>