轮播图，组件自动导入

首页--通用轮播组件

轮播图组件需要在首页和分类页使用，需要封装成通用组件。

1.准备组件

2.自动导入组件

3.添加组件类型声明

静态结构：src/components/XtxSwiper.vue

<script setup lang="ts">
import { ref } from 'vue'

const activeIndex = ref(0)
</script>

<template>
  <view class="carousel">
    <swiper :circular="true" :autoplay="false" :interval="3000">
      <swiper-item>
        <navigator url="/pages/index/index" hover-class="none" class="navigator">
          <image
            mode="aspectFill"
            class="image"
            src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_1.jpg"
          ></image>
        </navigator>
      </swiper-item>
      <swiper-item>
        <navigator url="/pages/index/index" hover-class="none" class="navigator">
          <image
            mode="aspectFill"
            class="image"
            src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_2.jpg"
          ></image>
        </navigator>
      </swiper-item>
      <swiper-item>
        <navigator url="/pages/index/index" hover-class="none" class="navigator">
          <image
            mode="aspectFill"
            class="image"
            src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_3.jpg"
          ></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 指示点 -->
    <view class="indicator">
      <text
        v-for="(item, index) in 3"
        :key="item"
        class="dot"
        :class="{ active: index === activeIndex }"
      ></text>
    </view>
  </view>
</template>

<style lang="scss">
:host {
  display: block;
  height: 280rpx;
}
/* 轮播图 */
.carousel {
  height: 100%;
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  background-color: #efefef;
  .indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16rpx;
    display: flex;
    justify-content: center;
    .dot {
      width: 30rpx;
      height: 6rpx;
      margin: 0 8rpx;
      border-radius: 6rpx;
      background-color: rgba(255, 255, 255, 0.4);
    }
    .active {
      background-color: #fff;
    }
  }
  .navigator,
  .image {
    width: 100%;
    height: 100%;
  }
}
</style>
自动导入全局组件

参考配置

{
  // 组件自动引入规则
  "easycom": {
    // 是否开启自动扫描 @/components/$1/$1.vue 组件
    "autoscan": true,
    // 以正则方式自定义组件匹配规则
    "custom": {
      // uni-ui 规则如下配置
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
      // 以 Xtx 开头的组件，在 components 目录中查找
      "^Xtx(.*)": "@/components/Xtx$1.vue"
    }
  }
}

1. <swiper-item>: 这是一个自定义标签，它可能表示一个图片轮播项。通常，这样的标签是用来组织轮播的内容，并可能提供一些特定的样式或行为。

2. <navigator url="/pages/index/index" hover-class="none" class="navigator">: 这是另一个自定义标签，可能用于导航或链接。

   • url="/pages/index/index": 这定义了当这个导航元素被点击时，页面将会跳转到的URL。
   • hover-class="none": 这可能是一个自定义属性，表示当鼠标悬停在元素上时，不会添加任何特定的类。
   • class="navigator": 这是一个标准的HTML属性，它为这个元素指定了一个类名，这可以在CSS中用来选择和样式化这个元素。

3. `<image mode="aspectFill" class="image" src="https://pcapi-xiaotuxian-front-devtest.。

   • mode="aspectFill": 这可能是一个自定义属性，用于控制图片的显示模式。aspectFill意味着图片将会按比例填充整个元素，可能会被裁剪以适应。
   • class="image": 和之前的navigator标签一样，这为图片元素指定了一个类名，用于样式化。
   • src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_1.jpg": 这是图片的来源URL。

4. </navigator> 和 </swiper-item>: 这些都是闭合标签，分别对应于开始的<navigator>和<swiper-item>标签。

5. 

    自动导入组件：（修改easycom都需要重启）

6. 

    

   

    

 进行类型声明：

全局组件类型声明

olar 插件说明：Vue Language Tools

插入位置 src/types/components.d.ts

import XtxSwiper from './XtxSwiper.vue’
declare module 'vue' {
  export interface GlobalComponents {
    XtxSwiper: typeof XtxSwiper
  }
}

新版 Volar 把 declare module '@vue/runtime-core' 调整为 declare module 'vue'