uniapp 小兔鲜儿 - 首页模块（2）

目录

热门推荐

首页 – 热门推荐组件 

首页 – 获取热门推荐数据

首页 – 热门推荐数据类型并渲染

猜你喜欢

首页 – 猜你喜欢组件

首页 – 获取猜你喜欢数据

首页 – 猜你喜欢数据类型和渲染

首页 – 猜你喜欢分页准备

首页 – 猜你喜欢分页加载

 首页 – 猜你喜欢分页条件

首页 – 下拉刷新

首页触发下拉刷新

猜你喜欢组件定义重置数据的方法

骨架屏

---

热门推荐

热门推荐功能，后端根据用户的消费习惯等信息向用户推荐的一系列商品，前端负责展示这些商品展示给用户。

参考效果

首页 – 热门推荐组件 

 1. 准备组件(只有首页使用)

热门推荐布局为独立的组件 HotPanel，属于首页的业务组件，存放到首页的 components 目录中。

2. 导入并使用组件

import HotPanel from "./componets/HotPanel.vue";  

首页 – 获取热门推荐数据

1. 封装获取热门推荐数据API

export const getHomeHotAPI = () => {
  return http({
    method: 'GET',
    url: '/home/hot/mutli',
  })
}

2. 页面初始化调用API

import { onLoad } from "@dcloudio/uni-app";
import { getHomeHotAPI } from "@/services/home";
import type { HotItem } from "@/types/home";
import { ref } from "vue";
const getHomeHotData = async () => {
  const res = await getHomeHotAPI();
  hotList.value = res.result;
};
onLoad(() => {
  getHomeHotData();
});

首页 – 热门推荐数据类型并渲染

1. 定义热门推荐数据类型

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

2. 指定类型并传值给子组件

const hotList = ref([])

import type { HotItem } from "@/types/home";
defineProps<{
  list: HotItem[];
}>();

3. 渲染热门推荐数据

  
  
    
      
        {{ item.title }}
        {{ item.alt }}
      
      
        
      
    
  

猜你喜欢

参考效果

猜你喜欢功能，后端根据用户的浏览记录等信息向用户随机推荐的一系列商品，前端负责把商品在多个页面中展示。

首页 – 猜你喜欢组件

1. 准备组件(通用组件)

猜你喜欢是一个通用组件 XtxGuess，多个页面会用到该组件，存放到 src/components 目录中。

2. 定义组件类型、

// types/components.d.ts
import XtxGuess from '@/components/XtxGuess.vue'
declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    XtxGuess: typeof XtxGuess
  }
}

3. 准备 scroll-view 滚动容器

4. 设置 page 和 scroll-view 样式

首页 – 获取猜你喜欢数据

1. 封装获取猜你喜欢数据API、

/**
 * 猜你喜欢-小程序
 */
export const getHomeGoodsGuessLikeAPI = (data?: PageParams) => {
  return http>({
    method: 'GET',
    url: '/home/goods/guessLike',
    data,
  })
}

2. 组件挂载完毕调用API

// 获取猜你喜欢列表数据
const getHomeGoodsGuessLikeData = async () => {
const res = await getHomeGoodsGuessLikeAPI()
console.log(res)
}
// 组件挂载完毕
onMounted(() => {
getHomeGoodsGuessLikeData()
})

首页 – 猜你喜欢数据类型和渲染

/** 通用分页结果类型 */
export type PageResult = {
  /** 列表数据 */
  items: T[]
  /** 总条数 */
  counts: number
  /** 当前页数 */
  page: number
  /** 总页数 */
  pages: number
  /** 每页条数 */
  pageSize: number
}
/** 猜你喜欢-商品类型 */
export type GuessItem = {
  /** 商品描述 */
  desc: string
  /** 商品折扣 */
  discount: number
  /** id */
  id: string
  /** 商品名称 */
  name: string
  /** 商品已下单数量 */
  orderNum: number
  /** 商品图片 */
  picture: string
  /** 商品价格 */
  price: number
}
/** 通用分页参数类型 */
export type PageParams = {
  /** 页码：默认值为 1 */
  page?: number
  /** 页大小：默认值为 10 */
  pageSize?: number
}

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

 

const guessList = ref([])
const getHomeGoodsGuessLikeData = async () => {
    const res = await getHomeGoodsGuessLikeAPI()
    guessList.value = res.result.items
}

  
    
      
      {{ item.name }}
      
        ¥
        {{ item.price }}
      
    
  

首页 – 猜你喜欢分页准备

 滚动触底 和 模板ref

// pages/index/index.vue

组件实例类型

// 组件实例类型
export type XtxGuessInstance = InstanceType

暴露方法

// 暴露方法
defineExpose({
  getMore: getHomeGoodsGuessLikeData,
});

首页 – 猜你喜欢分页加载

/**
 * 猜你喜欢-小程序
 */
export const getHomeGoodsGuessLikeAPI = (data?: PageParams) => {
  return http>({
    method: 'GET',
    url: '/home/goods/guessLike',
    data,
  })
}

/** 通用分页参数类型 */
export type PageParams = {
  /** 页码：默认值为 1 */
  page?: number
  /** 页大小：默认值为 10 */
  pageSize?: number
}

// 分页参数
const pageParams: Required < PageParams > = {
	page: 1,
	pageSize: 10,
}
const getHomeGoodsGuessLikeData = async () => {
	const res = await getHomeGoodsGuessLikeAPI(pageParams)
	// 数组追加
	guessList.value.push(...res.result.items)
	// 页码累加
	pageParams.page++
}

 首页 – 猜你喜欢分页条件

// src/components/XtxGuess.vue

首页 – 下拉刷新

首页触发下拉刷新

下拉刷新实际上是在用户操作下拉交互时重新调用接口，然后将新获取的数据再次渲染到页面中。

操作步骤

基于 scroll-view 组件实现下拉刷新，需要通过以下方式来实现下拉刷新的功能。

• 配置 refresher-enabled 属性，开启下拉刷新交互
• 监听 @refresherrefresh 事件，判断用户是否执行了下拉操作
• 配置 refresher-triggered 属性，关闭下拉状态

// src/pages/index/index.vue




  …省略

猜你喜欢组件定义重置数据的方法

// src/components/XtxGuess.vue
// 重置数据
const resetData = () => {
  pageParams.page = 1
  guessList.value = []
  finish.value = false
}
// 暴露方法
defineExpose({
  resetData,
})

骨架屏

骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。

参考效果

骨架屏作用是缓解用户等待时的焦虑情绪，属于用户体验优化方案。