1. Toy模板网首页
  2. > Toy博客

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

9月前 作者：前端 贾公子 分类：Toy博客 阅读(55) 违法举报

这篇具有很好参考价值的文章主要介绍了uniapp 小兔鲜儿 - 首页模块（2）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

热门推荐

首页 – 热门推荐组件 

首页 – 获取热门推荐数据

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

猜你喜欢

首页 – 猜你喜欢组件

首页 – 获取猜你喜欢数据

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

首页 – 猜你喜欢分页准备

首页 – 猜你喜欢分页加载

 首页 – 猜你喜欢分页条件

首页 – 下拉刷新

首页触发下拉刷新

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

骨架屏

热门推荐

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

参考效果

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

首页 – 热门推荐组件 

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

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

<script setup lang="ts">
//
</script>

<template>
  <!-- 推荐专区 -->
  <view class="panel hot">
    <view class="item" v-for="item in 4" :key="item">
      <view class="title">
        <text class="title-text">特惠推荐</text>
        <text class="title-desc">精选全攻略</text>
      </view>
      <navigator hover-class="none" url="/pages/hot/hot" class="cards">
        <image
          class="image"
          mode="aspectFit"
          src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_small_1.jpg"
        ></image>
        <image
          class="image"
          mode="aspectFit"
          src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_small_2.jpg"
        ></image>
      </navigator>
    </view>
  </view>
</template>

<style lang="scss">
/* 热门推荐 */
.hot {
  display: flex;
  flex-wrap: wrap;
  min-height: 508rpx;
  margin: 20rpx 20rpx 0;
  border-radius: 10rpx;
  background-color: #fff;

  .title {
    display: flex;
    align-items: center;
    padding: 24rpx 24rpx 0;
    font-size: 32rpx;
    color: #262626;
    position: relative;
    .title-desc {
      font-size: 24rpx;
      color: #7f7f7f;
      margin-left: 18rpx;
    }
  }

  .item {
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 254rpx;
    border-right: 1rpx solid #eee;
    border-top: 1rpx solid #eee;
    .title {
      justify-content: start;
    }
    &:nth-child(2n) {
      border-right: 0 none;
    }
    &:nth-child(-n + 2) {
      border-top: 0 none;
    }
    .image {
      width: 150rpx;
      height: 150rpx;
    }
  }
  .cards {
    flex: 1;
    padding: 15rpx 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>


2. 导入并使用组件

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

首页 – 获取热门推荐数据

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

export const getHomeHotAPI = () => {
  return http<HotItem[]>({
    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<HotItem[]>([])
<HotPanel :list="hotList" />

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


3. 渲染热门推荐数据

  <!-- 推荐专区 -->
  <view class="panel hot">
    <view class="item" v-for="item in list" :key="item.id">
      <view class="title">
        <text class="title-text">{{ item.title }}</text>
        <text class="title-desc">{{ item.alt }}</text>
      </view>
      <navigator hover-class="none" url="/pages/recommend/recommend" class="cards">
        <image v-for="src in item.pictures" :key="src" :src="src"></image>
      </navigator>
    </view>
  </view>

猜你喜欢

参考效果

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

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

首页 – 猜你喜欢组件

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

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

<script setup lang="ts">
//
</script>

<template>
  <!-- 猜你喜欢 -->
  <view class="caption">
    <text class="text">猜你喜欢</text>
  </view>
  <view class="guess">
    <navigator
      class="guess-item"
      v-for="item in 10"
      :key="item"
      :url="`/pages/goods/goods?id=4007498`"
    >
      <image
        class="image"
        mode="aspectFill"
        src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_big_1.jpg"
      ></image>
      <view class="name"> 德国THORE男表 超薄手表男士休闲简约夜光石英防水直径40毫米 </view>
      <view class="price">
        <text class="small">¥</text>
        <text>899.00</text>
      </view>
    </navigator>
  </view>
  <view class="loading-text"> 正在加载... </view>
</template>

<style lang="scss">
:host {
  display: block;
}
/* 分类标题 */
.caption {
  display: flex;
  justify-content: center;
  line-height: 1;
  padding: 36rpx 0 40rpx;
  font-size: 32rpx;
  color: #262626;
  .text {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 28rpx 0 30rpx;

    &::before,
    &::after {
      content: '';
      width: 20rpx;
      height: 20rpx;
      background-image: url(@/static/images/bubble.png);
      background-size: contain;
      margin: 0 10rpx;
    }
  }
}

/* 猜你喜欢 */
.guess {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20rpx;
  .guess-item {
    width: 345rpx;
    padding: 24rpx 20rpx 20rpx;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
    overflow: hidden;
    background-color: #fff;
  }
  .image {
    width: 304rpx;
    height: 304rpx;
  }
  .name {
    height: 75rpx;
    margin: 10rpx 0;
    font-size: 26rpx;
    color: #262626;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .price {
    line-height: 1;
    padding-top: 4rpx;
    color: #cf4444;
    font-size: 26rpx;
  }
  .small {
    font-size: 80%;
  }
}
// 加载提示文字
.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0;
}
</style>


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 滚动容器

  <scroll-view scroll-y class="scroll">
    <XtxSwiper :list="bannerList" />
    <CategoryPanel :list="categoryList" />
    <HotPanel :list="hotList"></HotPanel>
    <XtxGuess></XtxGuess>
    <view class="index"> </view
  ></scroll-view>


4. 设置 page 和 scroll-view 样式

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scroll {
  flex: 1;
}
</style>

首页 – 获取猜你喜欢数据

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

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


2. 组件挂载完毕调用API

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

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

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

/** 通用分页结果类型 */
export type PageResult<T> = {
  /** 列表数据 */
  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<PageResult<GuessItem>>({
    method: 'GET',
    url: '/home/goods/guessLike',
    data,
  })
}

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

const guessList = ref<GuessItem[]>([])
const getHomeGoodsGuessLikeData = async () => {
    const res = await getHomeGoodsGuessLikeAPI()
    guessList.value = res.result.items
}
  <view class="guess">
    <navigator class="guess-item" v-for="item in guessList" :key="item.id">
      <image class="image" mode="aspectFill" :src="item.picture"></image>
      <view class="name">{{ item.name }}</view>
      <view class="price">
        <text class="small">¥</text>
        <text>{{ item.price }}</text>
      </view>
    </navigator>
  </view>

首页 – 猜你喜欢分页准备

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

 滚动触底 和 模板ref

// pages/index/index.vue
<script setup lang="ts">
import type { XtxGuessInstance } from '@/types/components'
import { ref } from 'vue'
// 获取猜你喜欢组件实例
const guessRef = ref<XtxGuessInstance>()

// 滚动触底事件
const onScrolltolower = () => {
  guessRef.value?.getMore()
}
</script>

<template>
  <!-- 滚动容器 -->
  <scroll-view scroll-y @scrolltolower="onScrolltolower">
    <!-- 猜你喜欢 -->
    <XtxGuess ref="guessRef" />
  </scroll-view>
</template>

组件实例类型

// 组件实例类型
export type XtxGuessInstance = InstanceType<typeof XtxGuess>

暴露方法

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

首页 – 猜你喜欢分页加载

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

/**
 * 猜你喜欢-小程序
 */
export const getHomeGoodsGuessLikeAPI = (data?: PageParams) => {
  return http<PageResult<GuessItem>>({
    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++
}

 首页 – 猜你喜欢分页条件

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

// src/components/XtxGuess.vue
<script setup lang="ts">
import { getHomeGoodsGuessLikeAPI } from '@/services/home'
import type { PageParams } from '@/types/global'
import type { GuessItem } from '@/types/home'
import { onMounted, ref } from 'vue'

// 分页参数
const pageParams: Required<PageParams> = {
  page: 1,
  pageSize: 10,
}
// 猜你喜欢的列表
const guessList = ref<GuessItem[]>([])
// 已结束标记
const finish = ref(false)
// 获取猜你喜欢数据
const getHomeGoodsGuessLikeData = async () => {
  // 退出分页判断
  if (finish.value === true) {
    return uni.showToast({ icon: 'none', title: '没有更多数据~' })
  }
  const res = await getHomeGoodsGuessLikeAPI(pageParams)
  // 数组追加
  guessList.value.push(...res.result.items)
  // 分页条件
  if (pageParams.page < res.result.pages) {
    // 页码累加
    pageParams.page++
  } else {
    finish.value = true
  }
}
// 重置数据
const resetData = () => {
  pageParams.page = 1
  guessList.value = []
  finish.value = false
}
// 组件挂载完毕
onMounted(() => {
  getHomeGoodsGuessLikeData()
})
// 暴露方法
defineExpose({
  resetData,
  getMore: getHomeGoodsGuessLikeData,
})
</script>

<template>
  <!-- 猜你喜欢 -->
  <view class="caption">
    <text class="text">猜你喜欢</text>
  </view>
  <view class="guess">
    <navigator
      class="guess-item"
      v-for="item in guessList"
      :key="item.id"
      :url="`/pages/goods/goods`"
    >
      <image class="image" mode="aspectFill" :src="item.picture"></image>
      <view class="name"> {{ item.name }} </view>
      <view class="price">
        <text class="small">¥</text>
        <text>{{ item.price }}</text>
      </view>
    </navigator>
  </view>
  <view class="loading-text">
    {{ finish ? '没有更多数据~' : '正在加载...' }}
  </view>
</template>

首页 – 下拉刷新

首页触发下拉刷新

下拉刷新实际上是在用户操作下拉交互时重新调用接口，然后将新获取的数据再次渲染到页面中。uniapp 小兔鲜儿 - 首页模块（2）,uni-app

操作步骤

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

  • 配置 refresher-enabled 属性，开启下拉刷新交互
  • 监听 @refresherrefresh 事件，判断用户是否执行了下拉操作
  • 配置 refresher-triggered 属性，关闭下拉状态
// src/pages/index/index.vue
<script setup lang="ts">
// 下拉刷新状态
const isTriggered = ref(false)
// 自定义下拉刷新被触发
const onRefresherrefresh = async () => {
  // 开启动画
  isTriggered.value = true
  // 重置猜你喜欢组件数据
  guessRef.value?.resetData() // 加载数据
  await Promise.all([getHomeBannerData(), getHomeCategoryData(), getHomeHotData()]) // 关闭动画
  isTriggered.value = false
}
</script>

<!-- 滚动容器 -->
<scroll-view
  refresher-enabled
  @refresherrefresh="onRefresherrefresh"
  :refresher-triggered="isTriggered"
  class="scroll-view"
  scroll-y
>
  …省略
</scroll-view>

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

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

骨架屏

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

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

参考效果

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

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

 文章来源地址https://www.toymoban.com/news/detail-656091.html

到了这里，关于uniapp 小兔鲜儿 - 首页模块（2）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 登录页的具体实现 (小兔鲜儿)【Vue3】

    登录页的具体实现 (小兔鲜儿)【Vue3】

    整体认识 登录页面的主要功能就是 表单校验和登录登出业务 准备模板 配置路由跳转 为什么需要校验 作用：前端提前校验可以 省去一些错误的请求提交 ，为后端节省接口压力 表单如何进行校验 ElementPlus表单组件内置了表单校验功能，只需要 按照组件要求配置必要参数 即

    2024年02月15日
    浏览(55)
  • web前端综合案例——小兔鲜首页（html+css）

    web前端综合案例——小兔鲜首页（html+css）

    前言：我这里只使用了html和css，js没有使用 项目源代码：https://pan.baidu.com/s/1alnekYEu5F9XwHTW7dO5RA?pwd=qjhd 页面效果：   1.准备项目相应的图片素材，设计稿。 2.创建项目: 2.1 项目名字为：xtx-pc-client 2.2 css里面创建了三个分别为         base.css 这个是全局设置的元素       

    2024年02月07日
    浏览(49)
  • 小兔鲜项目 uniapp （1）

    小兔鲜项目 uniapp （1）

    目录 项目架构 uni-app小兔鲜儿电商项目架构  小兔鲜儿电商课程安排 创建uni-app项目 1.通过HBuilderX创建 2.通过命令行创建 pages.json和tabBar案例 uni-app和原生小程序开发区别  用VS Code开发uni-app项目  拉取小兔鲜儿项目模板代码  基础架构–引入uni-ui组件库 操作步骤 安装类型声明

    2024年02月14日
    浏览(61)
  • uni-app实现分页--（1）准备工作，首页下拉触底加载更多

    uni-app实现分页--（1）准备工作，首页下拉触底加载更多

    实现流程如下: 分析：需要在滚动容器中添加滚动触底，在猜你喜欢中获取数据。难点：如何在父页面调用子组件内的方法。父组件中用ref，并定义组件实例类型，子组件中暴露方法 具体代码如下： 1.在父组件中添加scrolltolower事件，用于调用子组件方法获取数据 2.给子组件添

    2024年04月11日
    浏览(43)
  • 【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果（五十二）

    【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果（五十二）

    💌 所属专栏：【微信小程序开发教程】 😀 作  者：我是夜阑的狗🐶 🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享 ，欢迎咨询！ 💖 欢迎大家：这里是CSDN，我总结知识的地方，喜欢的话请三连，有问题请私信 😘 😘 😘   大家好，又见面了，

    2023年04月18日
    浏览(76)
  • 【微信小程序】使用uni-app——开发首页搜索框导航栏（可同时兼容APP、H5、小程序）

    【微信小程序】使用uni-app——开发首页搜索框导航栏（可同时兼容APP、H5、小程序）

    目录 前言 App、H5效果 小程序效果 一、兼容APP、H5的方式 二、兼容小程序 三、实现同时兼容 首页都会提供一个搜索框给到客户，让客户自己去搜索自己想要的内容，这里就需要导航栏，来实现搜索页面的跳转，效果如下 在常见titleNView配置代码示例中可以看到基本样式的代码

    2024年02月03日
    浏览(78)
  • 『UniApp』uni-app-打包成App

    『UniApp』uni-app-打包成App

    大家好，我是 BNTang, 在上一节文章中，我给大家详细的介绍了如何将我开发好的项目打包为微信小程序并且发布到微信小程序商店 趁热打铁，在来一篇文章，给大家详细的介绍如何将项目打包成APP。 打包 App 也是一样的，首先需要配置关于 App 应用的基础信息，打开 manifest

    2024年02月04日
    浏览(107)
  • 【UniApp】-uni-app-网络请求

    【UniApp】-uni-app-网络请求

    经过上个章节的介绍，大家可以了解到 uni-app-pinia存储数据的基本使用方法 那本章节来给大家介绍一下 uni-app-网络请求 的基本使用方法 首先我们打开官方文档，我先带着大家看一下官方文档的介绍：https://uniapp.dcloud.net.cn/api/request/request.html 从官方文档中我们可以看到，可以

    2024年02月04日
    浏览(53)
  • 【UniApp】-uni-app-打包成网页

    【UniApp】-uni-app-打包成网页

    经过上一篇文章的介绍，已经将这个计算器的计算功能实现了，接下来就是我们项目当中的一个发包上线阶段，我模拟一下，目的就是为了给大家介绍一下，uni-app是如何打包成网页的。 除了可以打包成网页，uni-app还可以打包成小程序、App、H5、快应用等等，后面在单独开文

    2024年02月04日
    浏览(71)
  • Uniapp uni-app学习与快速上手

    Uniapp uni-app学习与快速上手

    个人开源uni-app开源项目地址：准备中 在线展示项目地址：准备中 什么是uni-app uni，读 you ni ，是统一的意思。 Dcloud即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位，致力于推进HTML5发展构建，HTML5生态。 2012年，DCloud开始研发小程序技术，优化webvie

    2024年02月09日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包