轮播图基础布局

src/components/XtxSwiper.vue

@@ -0,0 +1,82 @@
+<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>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeIndex = ref(0)
+</script>
+
+<style lang="scss">
+/* 轮播图 */
+.carousel {
+  height: 280rpx;
+  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>

src/pages/index/index.vue

@@ -2,11 +2,13 @@
   <view>
     <!-- 自定义导航栏 -->
     <CustomNavbar />
+    <XtxSwiper />
   </view>
 </template>
 
 <script setup lang="ts">
 import CustomNavbar from './components/CustomNavbar.vue'
+import XtxSwiper from '../../components/XtxSwiper.vue'
 </script>
 
 <style lang="scss">

src/types/component.d.ts

@@ -6,6 +6,6 @@
 import 'vue'
 declare module 'vue' {
   export interface GlobalComponents {
-    //
+    XtxSwiper: typeof XtxSwiper
   }
 }