商城小程序（5.商品列表）

news2025/4/7 23:32:02

目录

  • 一、定义请求参数对象
  • 二、获取商品列表数据
  • 三、渲染商品列表结构
  • 四、把商品item封装为自定义组件
  • 五、使用过滤器处理价格
  • 六、上拉加载更多
  • 七、下拉刷新
  • 八、点击商品item项跳转到详情页面

这章主要完成商品列表页面的编写：位于subpkg分包下的goods_list页面
在这里插入图片描述

一、定义请求参数对象

先看一下我们需要用到的后端api接口：商品列表搜索
在这里插入图片描述

返回结果

在这里插入图片描述
在这里插入图片描述
现在开始写前端：因为向后端发送请求，需要4个参数，所以我们可以先封装一个对象

在这里插入图片描述

<script>
	export default {
		data() {
			return {
				// 请求参数对象
				queryObj: {
					// 查询关键字
					query: '',
					// 商品分类id
					cid: '',
					// 页码值
					pagenum: 1,
					// 每页显示多少条数据
					pagesize: 10,
				}
			};
		},
		onLoad(options) {
			// 将页面参数转存到 this.queryobj对象中
			this.queryObj.query = options.query || ''
			this.queryObj.cid = options.cid || ''
		}
	}
</script>

二、获取商品列表数据

在这里插入图片描述
3.在methods中定义getGoodsList方法

		methods: {
			// 获取商品列表方法
			async getGoodsList() {
				const {data : res} = await uni.request({
					url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/search',
					data: this.queryObj,
					method: 'GET',
				})
				if (res.meta.status !== 200) {
					return uni.showToast({
						title: '数据请求失败！',
						duration: 1500,
						icon: 'none',
					})
				}
				this.goodsList = res.message.goods
				this.total = res.message.total
			}
		}

三、渲染商品列表结构

在页面，通过v-for指令，渲染出商品的UI结构：

<template>
	<view>
		<view class="goods-list">
			<block v-for="(goods, i) in goodsList" :key='i'>
				<view class="goods-item">
					<!--左侧盒子-->
					<view class="goods-item-left">
						<image :src="goods.goods_small_logo" class="goods-pic"></image>
					</view>
					<!--右侧盒子-->
					<view class="goods-item-right">
						<!--商品名字-->
						<view class="goods-name">{{goods.goods_name}}</view>
						<view class="goods-info-box">
							<view class="goods-price">${{goods.goods_price}}</view>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

美化ui

<style lang="scss">
	.goods-item{
		display: flex;
		padding: 10px 5px;
		border-bottom: 1px solid #F0F0F0;
		
		.goods-item-left{
			margin-right: 5px;
			.goods-pic{
				width: 100px;
				height: 100px;
				display: block;
			}
		}
		
		.goods-item-right{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.goods-name{
				font-size: 13px;
			}
			.goods-info-box{
				.goods-price{
					color: #C00000;
					font-size: 16px;
				}
			}
		}
	}

</style>

查看界面（首页，分类页随便点一个进去看）

在这里插入图片描述
在这里插入图片描述

四、把商品item封装为自定义组件

创建my-goods自定义组件

在这里插入图片描述

将从block下开始的UI全部抽取出来（style也同理），复制到新组件my-goods统一管理，并调用my-goods自定义组件

在这里插入图片描述
在这里插入图片描述

my-goods组件：不同点，定义一个props用于接受参数

<template>
	<view class="goods-item">
		<!--左侧盒子-->
		<view class="goods-item-left">
			<image :src="goods.goods_small_logo" class="goods-pic"></image>
		</view>
		<!--右侧盒子-->
		<view class="goods-item-right">
			<!--商品名字-->
			<view class="goods-name">{{goods.goods_name}}</view>
			<view class="goods-info-box">
				<view class="goods-price">${{goods.goods_price}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-goods",
		props: {
			goods: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.goods-item{
		display: flex;
		padding: 10px 5px;
		border-bottom: 1px solid #F0F0F0;
		
		.goods-item-left{
			margin-right: 5px;
			.goods-pic{
				width: 100px;
				height: 100px;
				display: block;
			}
		}
		
		.goods-item-right{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.goods-name{
				font-size: 13px;
			}
			.goods-info-box{
				.goods-price{
					color: #C00000;
					font-size: 16px;
				}
			}
		}
	}
</style>

封装完成也能正常展示页面：

在这里插入图片描述

五、使用过滤器处理价格

在这里插入图片描述

六、上拉加载更多

1.打开项目根目录中的pages.json配置文件，为subPackages分包中的goods_list 页面配置上拉触底的距离：

在这里插入图片描述

2.在goods_list页面中，和methods节点平级，声明onReachBottom事件处理函数，用来监听页面的上拉触底行为

		onReachBottom() {
			// 让页面值自增
			this.queryObj.pagenum++
			// 重新获取列表数据
			this.getGoodsList()
		}

3.改造methods中的getGoodsList函数，当请求成功之后，进行新旧数据的拼接处理
在这里插入图片描述

上拉页面，就可以加载后面页码的内容数据，获取之前无法展示的数据了。

在这里插入图片描述
这里存在一些问题需要解决： 当我们一直往下滑动请求数据时，会频繁的向我们后台发送请求获取数据，可能我们第二页还没加载完，就在发送第五页数据请求了。

在这里插入图片描述
所以我们需要等待第二页数据完，后续的请求都不能发起，这样才比较合理

我们可以通过开启节流阀防止发起额外的请求：
在这里插入图片描述

在请求数据前后打开关闭节流阀

在这里插入图片描述

在触发触底事件时，要判断节流阀是否开启

在这里插入图片描述
还有个bug：当我们页面加载完时，再上拉获取数据，还是会发送新的页面请求，但实际我们后台的pagenum已经到最后一页（只有3页数据，但在发送第四页请求），所以我们还要判断数据是否获取完毕

在这里插入图片描述

解决这个问题也很简单

在这里插入图片描述

在这里插入图片描述
这样就比较合理，数据加载完，不会发送新数据，再去获取列表
在这里插入图片描述

七、下拉刷新

enablePullDownRefresh：表示开启当前页面的下拉刷新功能

在这里插入图片描述
2.监听页面的onPullDownRefresh事件：（如果发生下拉事件，刷新数据）与methods平级创建
在这里插入图片描述

		onPullDownRefresh() {
			// 重置关键数据
			this.queryObj.pagenum = 1
			this.total = 0
			this.isloading = false
			this.goodsList = []
			// 重新发起数据请求
			this.getGoodsList(() => uni.stopPullDownRefresh())
		}

3.修改getGoodsList函数，接受cb回调函数并按需进行调用

在这里插入图片描述

上拉刷新，重置我们之前发送的请求（比如之前如果向下获取过第二页，第三页数据就没了，只有第一页）
在这里插入图片描述

八、点击商品item项跳转到详情页面

前面做过很多了，很简单
在这里插入图片描述

点击成功跳转
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1357920.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基于ssm的网上购物平台设计+jsp论文

基于ssm的网上购物平台设计+jsp论文

摘 要 信息数据从传统到当代&#xff0c;是一直在变革当中&#xff0c;突如其来的互联网让传统的信息管理看到了革命性的曙光&#xff0c;因为传统信息管理从时效性&#xff0c;还是安全性&#xff0c;还是可操作性等各个方面来讲&#xff0c;遇到了互联网时代才发现能补上自古…
阅读更多...
SpringMVC-视图

SpringMVC-视图

SpringMVC中的视图实现了View接口&#xff0c;作用是渲染数据&#xff0c;将Model中的数据展示给用户。render是渲染方法&#xff0c;可以看到渲染的视图是一个View类型的对象。 SpringMVC视图的种类有很多&#xff0c;默认有转发视图和重定向视图。 如果配置了Thymeleaf视图解…
阅读更多...
Ansible的安装及简单使用

Ansible的安装及简单使用

## Ansible的安装及简单使用 ## 一.Ubuntu安装Ansible sudo apt update sudo apt install ansible #使用以下命令检查安装是否成功&#xff1a; ansible --version二.配置Ansible #进入配置文件目录 cd /etc/ansible/ ls#文件含义 ansible.cfg #ansible配置文件,默认基本不用…
阅读更多...
安卓和Android是两种不同的操作系统？

安卓和Android是两种不同的操作系统？

实际上&#xff0c;安卓和Android并不是同一种操作系统&#xff01; Android是由Google开发并维护更新的一款操作系统&#xff0c;目前仅能运行在Pixel手机上。 Google Pixel 与 iPhone手机&#xff1a;哪个更好&#xff1f;Google Pixel 与 Apple iPhone哪个手机才是性价比最…
阅读更多...
JavaScript IE浏览器展示pdf

JavaScript IE浏览器展示pdf

工具 语法 <div style"height: 95%;width: 1000px;text-align: center;margin: 5px auto;"><div id"pdf_div" style"width: 100%;height: 100%;"></div></div>var divHtml "<object classidclsid:CA8A9780-280…
阅读更多...
基于ssm的教室信息管理系统论文

基于ssm的教室信息管理系统论文

摘 要 使用旧方法对教室信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在教室信息的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问题。 这次开发的教室信息管理系统有管理…
阅读更多...
Electron介绍

Electron介绍

前言 相信很多的前端小伙伴都想过一个问题&#xff0c;web技术是否可以用于开发桌面应用。答案当然是可以的&#xff0c;Electron框架就是其中的一种解决方案。 Electron介绍 Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 并不是一门新的…
阅读更多...
眼镜清洗机有哪些品牌值得入手？眼镜清洗机性价比高推荐

眼镜清洗机有哪些品牌值得入手？眼镜清洗机性价比高推荐

在这个科技飞速发展的时代&#xff0c;我们的生活品质不断提高&#xff0c;各种便捷的智能家居用品如雨后春笋般涌现。眼镜清洗机作为近年来备受瞩目的家居小电器&#xff0c;以其高效、便捷的特性赢得了广大消费者的青睐。但市场上眼镜清洗机品牌众多&#xff0c;如何选择一款…
阅读更多...
Vue中使用Element UI的Table组件实现嵌套表格(最简单示例)

Vue中使用Element UI的Table组件实现嵌套表格(最简单示例)

以下是一个简单的示例代码&#xff0c;演示如何在Vue中使用Element UI的Table组件实现嵌套表格&#xff1a; html <template><div><el-table :data"tableData" style"width: 100%"><el-table-column prop"name" label&quo…
阅读更多...
Capsolver：解决Web爬虫中CAPTCHA挑战的最优解决方案

Capsolver：解决Web爬虫中CAPTCHA挑战的最优解决方案

Web爬虫已经成为从各种在线来源提取和分析数据的不可或缺的技术。然而&#xff0c;在Web爬取过程中&#xff0c;经常会遇到的一个共同挑战是CAPTCHA。CAPTCHA&#xff08;完全自动化的公共图灵测试&#xff0c;用于区分计算机和人类&#xff09;是一种安全措施&#xff0c;旨在…
阅读更多...
JavaWeb基础（2）- Web概述、HTTP协议、Servlet、Request与Response

JavaWeb基础（2）- Web概述、HTTP协议、Servlet、Request与Response

JavaWeb基础&#xff08;2&#xff09;- Web概述、HTTP协议、Servlet、Request与Response 文章目录 JavaWeb基础&#xff08;2&#xff09;- Web概述、HTTP协议、Servlet、Request与Response3 Web概述3.1 Web和JavaWeb的概念3.2 JavaWeb技术栈3.2.1 B/S架构**3.2.2 静态资源**3…
阅读更多...
SpringIOC之support模块DefaultMessageSourceResolvable

SpringIOC之support模块DefaultMessageSourceResolvable

博主介绍&#xff1a;✌全网粉丝5W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…
阅读更多...
玻璃生产ERP有什么品牌?哪家的玻璃生产ERP操作简单

玻璃生产ERP有什么品牌?哪家的玻璃生产ERP操作简单

不同的玻璃制品有不同的生产工艺&#xff0c;而每道生产工序又有区别化的管理方式&#xff0c;涉及复杂的品质检验标准。同时部分玻璃制品的生产过程复杂&#xff0c;每张生产工单的工艺是否计件、是否品质的标准各不相同。 还有些玻璃生产企业内部存在排产混乱、订单追踪难、…
阅读更多...
目标检测中的常见指标

目标检测中的常见指标

概念引入&#xff1a; TP&#xff1a;True Positive IoU > 阈值 检测框数量 FP: False Positive IoU < 阈值 检测框数量 FN: False Negative 漏检框数量 Precision:查准率 Recall:查全率&#xff08;召回率&#xff09; AP&am…
阅读更多...
如何利用PLC网关实现PLC远程调试？

如何利用PLC网关实现PLC远程调试？

在工业自动化领域&#xff0c;PLC&#xff08;可编程逻辑控制器&#xff09;是核心组成部分。但传统PLC调试方式往往需要工程师亲临现场&#xff0c;这不仅耗时&#xff0c;还增加了成本。好消息是&#xff0c;借助PLC网关&#xff0c;我们可以实现PLC的远程调试&#xff01;今…
阅读更多...
WEB 3D技术 three.js 法向量演示性讲解

WEB 3D技术 three.js 法向量演示性讲解

本文 我们来说法向 法向 又叫 法向量 就是 我们一个三维物体 顶点垂直于面 的方向 向量 他的作用 用来做光反射 根据光照的方向 根据面进行反射 我们上文写的这个代码 import ./style.css import * as THREE from "three"; import { OrbitControls } from "…
阅读更多...
自定义页面，落地页面自由搭配

自定义页面，落地页面自由搭配

自定义页面 路径 应用 >> 新增自定义页面 功能简介 应用内新增「自定义页面」。 自定义页面是一个可以自由配置的落地页面&#xff0c;支持通过不同的入口设置连接到不同的链接地址&#xff0c;使得不同的应用资源可以根据业务场景化的展示。 使用场景&#xff1a; 一…
阅读更多...
基于OpenCV的图像缩放

基于OpenCV的图像缩放

基础概念 缩放是将图像的尺寸变小或变大的过程&#xff0c;即减少或增加原图像数据的像素个数&#xff0c;或者说通过增加或删除像素点来改变图像的尺寸&#xff1b; 基本原理&#xff1a;将分辨率&#xff08;图片尺寸&#xff09;为(w,h)的图像&#xff0c;缩放后其图像分辨…
阅读更多...
Windows PowerShell的安全目标——安全警报

Windows PowerShell的安全目标——安全警报

Windows PowerShell的安全目标——安全警报 1. 保证Shell安全 ​ 自从2006年年底PowerShell发布以来&#xff0c;微软在安全和脚本方面并没有取得很好的名声。毕竟那个时候&#xff0c;**VBScript和Windows Script Host(WSH)**是两个最流行的病毒和恶意软件的载体&#xff0c…
阅读更多...
Hex2Bin转换工具文档、Bootloader 、OTA 、STM32等MCU适用

Hex2Bin转换工具文档、Bootloader 、OTA 、STM32等MCU适用

说明&#xff1a;这个工具可以将 Hex 文件 转换为 Bin 格式文件&#xff0c;软件是按自己开发 STM32 OAT 功能需求开发的一款辅助 上位机软件。 有兴趣的朋友可留言探讨。 附加功能&#xff1a; 1.另外可以生成指定大小的bin 格式文件&#xff0c;文件多余的空余位置填充随机…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023