uniapp项目之小兔鲜儿小程序商城(二) 首页的实现:自定义导航栏,轮拨图,前台分类,热门推荐,猜你喜欢,下拉刷新,骨架屏

文章目录

零.首页最终效果

在这里插入图片描述

一.自定义导航栏

要求把默认的导航栏升级成自行以导航栏,并进行样式适配,做成可复用的组件
在这里插入图片描述

1.新建`pages/index/components/CustomNavbar.vue`首页子组件

并复制静态结构如下

<script setup lang="ts">
//
</script>
<template>
  <view class="navbar">
    <!-- 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>

2.在首页`pages/index/index.vue`中引入

<script setup lang="ts">
//引入子组件CustomNavBar
import CustomNavbar from './components/CustomNavbar.vue'
</script>
<template>
  <!-- 使用子组件 -->
  <CustomNavbar />
  <view class="index">index我是首页</view>
</template>

3.隐藏默认导航栏+修改标题颜色

//pages.json
    {
   
   
      "path": "pages/index/index",
      "style": {
   
   
        "navigationBarTitleText": "首页",
        "navigationStyle": "custom",//隐藏默认导航栏
        "navigationBarTextStyle": "white",//修改标题颜色
      }
    }

4.适配不同机型

对安全区域进行样式适配

使用到了uniapp的一个api:获取屏幕边界到安全区域的距离

//获取屏幕边界到安全区域的距离
const {
   
    safeAreaInsets } = uni.getSystemInfoSync()

在子组件中使用

//使用uniapp的api,获取屏幕边界到安全区域的距离
const {
   
    safeAreaInsets } = uni.getSystemInfoSync()
......
  <!-- 把该距离变量动态绑定style,可以实现导航条跟随屏幕刘海区域变化 -->
  <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <!-- logo文字 -->
  </view>

二.轮拨图

轮拨图不仅在首页中使用到,在商品分类页中也有,因此也封装成一个通用组件

1.新建 `src/components/XtxSwiper.vue`全局子组件

并准备静态结构如下:

<script setup lang="ts">
import {
   
    ref } from 'vue'
const activeIndex = ref(0)
</script>
<template>
  <view class="carousel">
    <!-- 使用到了小程序的标签:swiper -->
    <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>

2.自动导入通用组件的步骤

(参考之前在pages.json中对uni-ui的配置)

//pages.json
{
   
   
  //组件自动导入
  "easycom": {
   
   
    //是否开启自动扫描
    "autoscan": true,
    //以正则方式自定义组件的匹配规则(添加后需重启服务器才能生效)
    "custom": {
   
   
      // 之前的:uni-ui 规则如下配置
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
      //新增的:以Xtx开头的组件
      "^xtx(.*)": "@/components/xtx$1.vue"
    }
  },
  "pages": [
    ......
  ],
}

验证:在首页中不导入直接使用轮拨图组件

<script setup lang="ts">
//引入子组件CustomNavBar
import CustomNavbar from './components/CustomNavbar.vue'
</script>
<template>
  <!-- 使用子组件 -->
  <CustomNavbar />
  <!-- 不用导入,直接使用轮拨图通用子组件 -->
   <XtxSwiper />
  <view class="index">index我是首页</view>
</template>

3.添加类型声明

此时自动导入的 <XtxSwiper />和手动导入的<CustomNavbar />仍有区别----没有类型声明

知识点:为已有的js文件提供类型声明,关键字declare

// src/types/components.d.ts

//导入轮拨图组件
import XtxSwiper from './XtxSwiper.vue'
//扩展全局组件类型，声明全局组件的类型
declare module '@vue/runtime-core' {
   
   // 注意:此处更新了要写成:declare module 'vue'
  export interface GlobalComponents {
   
   
    XtxSwiper: typeof XtxSwiper//typeof拿到组件的类型，然后赋值给全局组件类型
  }
}

注:declare module '@vue/runtime-core'应为declare module 'vue'

4.轮拨图的指示点

此时的指示点仅是静态结构

    <!-- 指示点(自定义) -->
    <view class="indicator">
      <text
        v-for="(item, index) in 3"
        :key="item"
        class="dot"
        :class="{ active: index === activeIndex }"//动态绑定.active类实现高亮==>通过比较index===activeIndex
      ></text>
    </view>

最终目标是让指示点跟着轮拨图的切换而切换

step1:获取轮拨图滚动时,当前图片的索引

uniapp官网>Swiper>@change事件中event.detail.current就是下标

//当轮拨图滚动时触发
function onChange(e) {