uni-appDay02 - 技术栈

1.首页-通用轮播组件

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

准备组件
自动导入组件
添加组件类型声明

import XtxSwiper from './XtxSwiper.vue'
declare module '@vue/runtime-core' {
export interface GlobalComponents {
// 确认类型，全局定义
XtxSwiper: typeof XtxSwiper
}
}

2.轮播图-指示点

@change="onChange"

复制代码

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

const activeIndex = ref(0)
// 当swiper下标变化时触发
const onChange: UniHelper.SwiperOnChange = (ev) => {
  // 非空断言用!. 主观上排除掉空值情况
  activeIndex.value = ev.detail!.current
}
</script>

3.轮播图-获取轮播图数据

封装获取轮播图数据API

import { http } from '@/utils/http'

export const getHomeBannerAPI = (distributionSite = 1) => {
return http({
method: 'GET',
url: '/home/banner',
data: {
distributionSite,
},
})
}
页面初始化API

4.首页-轮播图数据类型并渲染

定义轮播图数据类型

/** 首页-广告区域数据类型 /
export type BannerItem = {
/* 跳转链接 /
hrefUrl: string
/* id /
id: string
/* 图片链接 /
imgUrl: string
/* 跳转类型 */
type: number
}
指定类型并传值给子组件

import { http } from '@/utils/http'
import { BannerItem } from '@/types/home'

export const getHomeBannerAPI = (distributionSite = 1) => {
return http<BannerItem[]>({
method: 'GET',
url: '/home/banner',
data: {
distributionSite,
},
})
}
渲染数据

5.前台分类-组件封装

准备组件（只有首页使用）
导入并使用组件
设置首页底色为#F7F7F7

// 导入

6.前台分类数据

封装获取前台分类数据API

export const getHomeCategoryAPI = () => {
return http({
method: 'GET',
url: '/home/category/mutli',
})
}
页面初始化调用API

7.前台分类数据类型并渲染

定义前台分类数据类型

export const getHomeCategoryAPI = () => {
return http<CategoryItem[]>({
method: 'GET',
url: '/home/category/mutli',
})
}
指定类型并传值给子组件

const categoryList = ref<CategoryItem[]>([])
const getHomeCategoryData = async () => {
const res = await getHomeCategoryAPI()
categoryList.value = res.result
}
渲染前台分类数据

8.首页-热门推荐

准备组件（只有首页使用）
导入并使用组件
封装获取热门推荐数据API

export const getHomeHotAPI = () => {
return http({
method: 'GET',
url: '/home/hot/mutli',
})
}
定义热门推荐数据类型并指定

/** 首页-热门推荐数据类型 /
export type HotItem = {
/* 说明 /
alt: string
/* id /
id: string
/* 图片集合[ 图片路径 ] /
pictures: string[]
/* 跳转地址 /
target: string
/* 标题 /
title: string
/* 推荐类型 */
type: string
}

export const getHomeHotAPI = () => {
return http<HotItem[]>({
method: 'GET',
url: '/home/hot/mutli',
})
}
传递给子组件并渲染

// 获取热门推荐数据
const hotList = ref<HotItem[]>([])
const getHomeHotData = async () => {
const res = await getHomeHotAPI()
hotList.value = res.result
}

9.猜你喜欢-组件封装

准备组件（通用组件）
定义组件类型

import XtxSwiper from '../components/XtxSwiper.vue'
import XtxGuess from '../components/XtxGuess.vue'
declare module '@vue/runtime-core' {
export interface GlobalComponents {
// 确认类型，全局定义
XtxSwiper: typeof XtxSwiper
XtxGuess: typeof XtxGuess
}
}
准备scroll-view滚动容器
设置page和scroll-view样式

10.获取猜你喜欢数据

封装获取猜你喜欢数据API

export const getHomeGoodsGuessLikeAPI = () => {
return http({
method: 'GET',
url: '/home/goods/guessLike',
})
}
组件挂载完毕调用API

11.猜你喜欢-类型定义和列表渲染

定义：

export const getHomeGoodsGuessLikeAPI = () => {
return http<PageResult>({
method: 'GET',
url: '/home/goods/guessLike',
})
}
渲染：

12.分页准备

监听事件

复制代码

<template>
  <!-- 自定义导航栏 -->
  <CustomNavbarom />
  <!-- 滚动 -->
  <scroll-view @scrolltolower="onScrolltoLower" class="scroll-view" scroll-y>
    <!-- 自定义轮播图 -->
    <XtxSwiper :list="bannerList" />
    <!-- 分类面板 -->
    <CategoryPanel :list="categoryList" />
    <!-- 热门推荐 -->
    <HotPanel :list="hotList" />
    <!-- 猜你喜欢 -->
    <XtxGuess ref="GuessRef" />
  </scroll-view>
</template>

模板ref

复制代码

const GuessRef = ref<XtxGuessInstance>()
const onScrolltoLower = () => {
  GuessRef.value?.getMore()
}

写模板类型
export type XtxGuessInstance = InstanceType<typeof XtxGuess>

暴露方法

复制代码

// 暴露出来
defineExpose({
  getMore: getHomeGoodsGuessLikeData,
})

const onScrolltoLower = () => {
// 调用
  GuessRef.value?.getMore()
}

13.猜你喜欢分页加载

在页码累加的时候要注意排除掉undefine的情况。将可选转换为必选

复制代码

export const getHomeGoodsGuessLikeAPI = (data?: PageParams) => {
  return http<PageResult<GuessItem>>({
    method: 'GET',
    url: '/home/goods/guessLike',
    data,
  })
}

//分页参数
//将可选换为必选
const pageParams: Required<PageParams> = {
  page: 1,
  pageSize: 10,
}
// 猜你喜欢的列表
const geussList = ref<GuessItem[]>([])
//获取猜你喜欢数据
const getHomeGoodsGuessLikeData = async () => {
  const res = await getHomeGoodsGuessLikeAPI()
  // geussList.value = res.result.items
  // 数据追加
  // 要将原数组解构，再追加
  geussList.value.push(...res.result.items)
  // 页码追加
  pageParams.page++
}

14.猜你喜欢分页条件

复制代码

//分页参数
//将可选换为必选
const pageParams: Required<PageParams> = {
  page: 30,
  pageSize: 10,
}
// 猜你喜欢的列表
const geussList = ref<GuessItem[]>([])
// 已结束标记
const finish = ref(false)
//获取猜你喜欢数据
const getHomeGoodsGuessLikeData = async () => {
  // 退出判断
  if (finish.value === true) {
    return wx.showToast({ icon: 'none', title: '没有更多数据~' })
  }
  const res = await getHomeGoodsGuessLikeAPI()
  // geussList.value = res.result.items
  // 数据追加
  geussList.value.push(...res.result.items)
  // 页码小于页总数
  if (pageParams.page < res.result.pages) {
    // 页码追加
    pageParams.page++
  } else {
    // =赋值   ===比较
    finish.value = true
  }
}

15.首页-下拉刷新

开启下拉刷新,监听事件

复制代码

 <!-- 滚动 -->
  <scroll-view
    refresher-enabled
    @refresherrefresh="onRefreshrefresh"
    :refresher-triggered="isTriggered"
    @scrolltolower="onScrolltoLower"
    class="scroll-view"
    scroll-y
  >

加载数据

复制代码

// 自定义下拉刷新
const onRefreshrefresh = async () => {
  isTriggered.value = true
  getHomeBannerData()
  getHomeCategoryData()
  getHomeHotData()

关闭动画

复制代码

// 当前下拉刷新状态
const isTriggered = ref(false)
// 自定义下拉刷新
const onRefreshrefresh = async () => {
  isTriggered.value = true
  // getHomeBannerData()
  // getHomeCategoryData()
  // getHomeHotData()
  // 同时请求
  await Promise.all([getHomeBannerData(), getHomeCategoryData(), getHomeHotData()])
  // 关闭动画
  isTriggered.value = false
}

16.下拉刷新-猜你喜欢组件

重置数据, 暴露出来

复制代码

// 重置数据
const resetData = () => {
  pageParams.page = 1
  geussList.value = []
  finish.value = false
}
// 暴露出来
defineExpose({
  resetData,
  getMore: getHomeGoodsGuessLikeData,
})

重置后调用

复制代码

// 自定义下拉刷新
const onRefreshrefresh = async () => {
  isTriggered.value = true
  // 重置猜你喜欢组件
  GuessRef.value?.resetData()
  // getHomeBannerData()
  // getHomeCategoryData()
  // getHomeHotData()
  // 同时请求
  // 重置后调用
  await Promise.all([
    getHomeBannerData(),
    getHomeCategoryData(),
    getHomeHotData(),
    GuessRef.value?.getMore(),
  ])

  // 关闭动画
  isTriggered.value = false
}

17.骨架屏

复制代码

//template
  <PageSkeleon v-if="isLoading" />
    <template v-else>
      <!-- 自定义轮播图 -->
      <XtxSwiper :list="bannerList" />
      <!-- 分类面板 -->
      <CategoryPanel :list="categoryList" />
      <!-- 热门推荐 -->
      <HotPanel :list="hotList" />
      <!-- 猜你喜欢 -->
      <XtxGuess ref="GuessRef" />
    </template>
  </scroll-view>

//script
const isLoading = ref(false)
// 页面加载
onLoad(async () => {
  isLoading.value = true
  await Promise.all([getHomeBannerData(), getHomeCategoryData(), getHomeHotData()])
  isLoading.value = false
})