uniapp实战 —— 猜你喜欢(含滚动触底分页加载)

2023-12-07 22:52

本文主要是介绍uniapp实战 —— 猜你喜欢(含滚动触底分页加载),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

效果预览

在这里插入图片描述

组件封装

src\components\SUI_Guess.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { GuessItem } from '@/types/index'
import { getGuessListAPI } from '@/apis/index'
import type { PageParams } from '@/types/global'// 分页参数 -- Required指定分页参数必传
const pageParams: Required<PageParams> = {page: 1,pageSize: 10,
}// 已结束标记
const finish = ref(false)// 猜你喜欢的数据列表
const GuessList = ref<GuessItem[]>([])// 获取猜你喜欢的数据列表
const getGuessList = async () => {// 已标记为无更多数据时,不再查询if (finish.value === true) {return uni.showToast({ icon: 'none', title: '没有更多数据~' })}// 查询分页数据let res = await getGuessListAPI(pageParams)// 新数据不断累加--数组追加GuessList.value.push(...res.result.items)// 未到最后一页时,页码不断累加if (pageParams.page < res.result.pages) {// 页码累加pageParams.page++} else {// 到达最后一页时,标记为无更多数据finish.value = true}
}// 生命周期-组件挂载成功时执行
onMounted(() => {getGuessList()
})// 对外暴露方法 -- 供父组件调用
defineExpose({getGuessList: getGuessList,
})
</script><template><!-- 猜你喜欢 --><view class="caption"><text class="text">猜你喜欢</text></view><view class="guess"><navigatorclass="guess-item"v-for="(item, index) in GuessList":key="'guess' + index":url="item.url"><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><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>

注册为全局组件

src\pages.json
在这里插入图片描述

必要的 TS 类型声明

组件和组件实例类型声明

src\types\component.d.ts

import 'vue'import SUI_Swiper from '@/components/SUI_Swiper.vue'
import SUI_Guess from '@/components/SUI_Guess.vue'
// 组件类型
declare module 'vue' {export interface GlobalComponents {SUI_Guess: typeof SUI_Guess}
}// 组件实例类型
export type SUI_GuessInstance = InstanceType<typeof SUI_Guess>

接口参数和返回值类型声明

src\types\global.d.ts

/** 通用分页参数类型 */
export type PageParams = {/** 页码:默认值为 1 */page?: number/** 页大小:默认值为 10 */pageSize?: number
}/** 通用分页结果类型 */
export type PageResult<T> = {/** 列表数据 */items: T[]/** 总条数 */counts: number/** 当前页数 */page: number/** 总页数 */pages: number/** 每页条数 */pageSize: number
}

业务数据类型声明

src\types\index.d.ts

/** 猜你喜欢 */
export type GuessItem = {/** 商品描述 */desc: string/** 商品折扣 */discount: number/** id */id: string/** 商品名称 */name: string/** 商品已下单数量 */orderNum: number/** 商品图片 */picture: string/** 商品价格 */price: number// 导航地址url: string
}

接口封装

src\apis\index.ts

import { http } from '@/utils/http'
import type { GuessItem } from '@/types/index'
import type { PageParams, PageResult } from '@/types/global'/*** 公共组件-猜你喜欢*/
export const getGuessListAPI = (data?: PageParams) => {return http<PageResult<GuessItem>>({method: 'GET',url: '/home/goods/guessLike',data,})
}

页面使用

src\pages\index\index.vue

  <!-- 中间--自适配高度的滚动区 --><scroll-view class="contentBox" scroll-y @scrolltolower="onScrolltolower"><SUI_Guess ref="guessRef" /></scroll-view>
<style lang="scss">
page {background-color: #f7f7f7;// 总容器高度撑满屏幕height: 100%;// 使容器内元素使用flex布局display: flex;flex-direction: column;
}
.contentBox {// 滚动区自适配高度flex: 1;
}
</style>
import type { SUI_GuessInstance } from '@/types/component'// 获取猜你喜欢组件实例
const guessRef = ref<SUI_GuessInstance>()// 滚动触底事件
const onScrolltolower = () => {guessRef.value?.getGuessList()
}

这篇关于uniapp实战 —— 猜你喜欢(含滚动触底分页加载)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/467637

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题,本文将一起从代码层去分析为什么没有建立索引? 开源ERP项目地址:https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置

C#实战|大乐透选号器[6]:实现实时显示已选择的红蓝球数量

哈喽,你好啊,我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记,这是第6篇; 接下来实现实时显示当前选中红球数量,蓝球数量; 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时,在对应的位置显示实时已选择的红球、蓝球的数量; 02 标签名称 分别设置Label标签名称为:lblRedCount、lblBlueCount

滚雪球学Java(87):Java事务处理:JDBC的ACID属性与实战技巧!真有两下子!

咦咦咦,各位小可爱,我是你们的好伙伴——bug菌,今天又来给大家普及Java SE啦,别躲起来啊,听我讲干货还不快点赞,赞多了我就有动力讲得更嗨啦!所以呀,养成先点赞后阅读的好习惯,别被干货淹没了哦~ 🏆本文收录于「滚雪球学Java」专栏,专业攻坚指数级提升,助你一臂之力,带你早日登顶🚀,欢迎大家关注&&收藏!持续更新中,up!up!up!! 环境说明:Windows 10

Flutter 进阶:绘制加载动画

绘制加载动画:由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类:LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态,而 LoadingPainter 则负责绘制动画。

uniapp设置微信小程序的交互反馈

链接:uni.showToast(OBJECT) | uni-app官网 (dcloud.net.cn) 设置操作成功的弹窗: title是我们弹窗提示的文字 showToast是我们在加载的时候进入就会弹出的提示。 2.设置失败的提示窗口和标签 icon:'error'是设置我们失败的logo 设置的文字上限是7个文字,如果需要设置的提示文字过长就需要设置icon并给

springboot实战学习(1)(开发模式与环境)

目录 一、实战学习的引言 (1)前后端的大致学习模块 (2)后端 (3)前端 二、开发模式 一、实战学习的引言 (1)前后端的大致学习模块 (2)后端 Validation:做参数校验Mybatis:做数据库的操作Redis:做缓存Junit:单元测试项目部署:springboot项目部署相关的知识 (3)前端 Vite:Vue项目的脚手架Router:路由Pina:状态管理Eleme

oracle分页和mysql分页

mysql 分页 --查前5 数据select * from table_name limit 0,5 select * from table_name limit 5 --limit关键字的用法:LIMIT [offset,] rows--offset指定要返回的第一行的偏移量,rows第二个指定返回行的最大数目。初始行的偏移量是0(不是1)。   oracle 分页 --查前1-9

基于SpringBoot的宠物服务系统+uniapp小程序+LW参考示例

系列文章目录 1.基于SSM的洗衣房管理系统+原生微信小程序+LW参考示例 2.基于SpringBoot的宠物摄影网站管理系统+LW参考示例 3.基于SpringBoot+Vue的企业人事管理系统+LW参考示例 4.基于SSM的高校实验室管理系统+LW参考示例 5.基于SpringBoot的二手数码回收系统+原生微信小程序+LW参考示例 6.基于SSM的民宿预订管理系统+LW参考示例 7.基于

深度学习实战:如何利用CNN实现人脸识别考勤系统

1. 何为CNN及其在人脸识别中的应用 卷积神经网络(CNN)是深度学习中的核心技术之一,擅长处理图像数据。CNN通过卷积层提取图像的局部特征,在人脸识别领域尤其适用。CNN的多个层次可以逐步提取面部的特征,最终实现精确的身份识别。对于考勤系统而言,CNN可以自动从摄像头捕捉的视频流中检测并识别出员工的面部。 我们在该项目中采用了 RetinaFace 模型,它基于CNN的结构实现高效、精准的