vue3 双重for循环 ts定义类型

最新推荐文章于 2025-05-16 10:45:11 发布

←_→

最新推荐文章于 2025-05-16 10:45:11 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： TS 文章标签： typescript

本文链接：https://blog.youkuaiyun.com/qq_43319351/article/details/131281634

TS 专栏收录该内容

20 篇文章

订阅专栏

这是一个使用Vue3编写的电商应用页面模板，包含自动轮播的商品图片展示区，导航链接以及商品楼层结构，每个楼层有商品列表。轮播图数据、导航条目和商品楼层信息都通过refs进行管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例

<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>