组件类型声明

src/components/XtxSwiper.vue

@@ -0,0 +1,82 @@
+<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">
+/* 轮播图 */
+.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/components/components.d.ts

@@ -0,0 +1,8 @@
+// src/components.d.ts  添加组件的类型声明
+import XtxSwiper from './XtxSwiper.vue'
+declare module 'vue' {
+  export interface GlobalComponents {
+    //组件名XtxSwiper： 付给的类型typeof XtxSwiper  这样鼠标移入组件名位置就显示出提示不是包unkon
+    XtxSwiper: typeof XtxSwiper
+  }
+}

src/pages.json

@@ -4,7 +4,9 @@
     "autoscan": true,
     "custom": {
       // uni-ui 规则如下配置
-      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
+      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
+      //组件自动导入 以小兔仙Xtx开头组件,在@src文件内components 文件夹查找 提取出来的用$1补位
+      "^Xtx(.*)": "@/components/Xtx$1.vue"
     }
   },
   "pages": [
@@ -12,7 +14,9 @@
     {
       "path": "pages/index/index",
       "style": {
-        "navigationBarTitleText": "首页"
+        "navigationBarTitleText": "首页",
+        "navigationStyle": "custom",
+        "navigationBarTextStyle": "white"
       }
     },
     {

src/pages/index/componets/CustomNavbar.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+// 获取屏幕边界到安全区域距离
+const { safeAreaInsets } = uni.getSystemInfoSync()
+console.log(safeAreaInsets, '安全区域')
+</script>
+
+<template>
+  <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
+    <!-- logo文字 -->
+    <view class="logo">
+      <image class="logo-image" src="@/static/images/logo.png"></image>
+      <text class="logo-text">新鲜 · 亲民 · 快捷</text>
+    </view>
+    <!-- 搜索条 -->
+    <view class="search">
+      <text class="icon-search">搜索商品</text>
+      <text class="icon-scan"></text>
+    </view>
+  </view>
+</template>
+
+<style lang="scss">
+/* 自定义导航条 */
+.navbar {
+  background-image: url(@/static/images/navigator_bg.png);
+  background-size: cover;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding-top: 20px;
+  .logo {
+    display: flex;
+    align-items: center;
+    height: 64rpx;
+    padding-left: 30rpx;
+    padding-top: 20rpx;
+    .logo-image {
+      width: 166rpx;
+      height: 39rpx;
+    }
+    .logo-text {
+      flex: 1;
+      line-height: 28rpx;
+      color: #fff;
+      margin: 2rpx 0 0 20rpx;
+      padding-left: 20rpx;
+      border-left: 1rpx solid #fff;
+      font-size: 26rpx;
+    }
+  }
+  .search {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10rpx 0 26rpx;
+    height: 64rpx;
+    margin: 16rpx 20rpx;
+    color: #fff;
+    font-size: 28rpx;
+    border-radius: 32rpx;
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+  .icon-search {
+    &::before {
+      margin-right: 10rpx;
+    }
+  }
+  .icon-scan {
+    font-size: 30rpx;
+    padding: 15rpx;
+  }
+}
+</style>

src/pages/index/index.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 //
+import CustomNavbar from './componets/CustomNavbar.vue'
 </script>
 
 <template>
+  <CustomNavbar></CustomNavbar>
+  <XtxSwiper></XtxSwiper>
   <view class="index">index</view>
 </template>