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

目录

  • 一、定义请求参数对象
  • 二、获取商品列表数据
  • 三、渲染商品列表结构
  • 四、把商品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.mfbz.cn/a/294281.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

消化性溃疡与胃肠道微生物群

消化性溃疡与胃肠道微生物群

谷禾健康 据柳叶刀统计&#xff0c;消化性溃疡(PUD)每年影响全球400万人&#xff0c;据估计普通人群终生患病率为5−10%(Lanas A et al., 2017)。尽管消化性溃疡的全球患病率在过去几十年中有所下降&#xff0c;但其并发症的发生率却保持不变。 消化性溃疡是指胃或十二指肠黏膜…
阅读更多...
k Nearest Neighbour(KNN)建模

k Nearest Neighbour(KNN)建模

目录 介绍&#xff1a; 一、建模 二、调参 2.1手动调参 2.2 GridSearchCV调参 2.3RandomizedSearchCV调参 介绍&#xff1a; K最近邻&#xff08;K-Nearest Neighbors&#xff0c;KNN&#xff09;是一种基本的分类和回归算法。它的基本思想是对未知样本进行预测时&#…
阅读更多...
16、Kubernetes核心技术 - 节点选择器、亲和和反亲和

16、Kubernetes核心技术 - 节点选择器、亲和和反亲和

目录 一、概述 二、节点名称 - nodeName 二、节点选择器 - nodeSelector 三、节点亲和性和反亲和性 3.1、亲和性和反亲和性 3.2、节点硬亲和性 3.3、节点软亲和性 3.4、节点反亲和性 3.5、注意点 四、Pod亲和性和反亲和性 4.1、亲和性和反亲和性 4.2、Pod亲和性/反…
阅读更多...
爱了！水浸监测这个技术，看了都说好！

爱了！水浸监测这个技术，看了都说好！

在当今社会&#xff0c;水浸事件可能对各类场所和设施造成严重的损害&#xff0c;从而威胁到财产安全和业务持续性。 水浸监控系统不仅仅是一种技术手段&#xff0c;更是对于防范水灾的一项战略性解决方案。水浸监控系统实时了解局势并采取迅速而有效的措施&#xff0c;从而最大…
阅读更多...
vue项目报错RangeError: Maximum call stack size exceeded

vue项目报错RangeError: Maximum call stack size exceeded

我的代码–> <script> import groupSettings from ./groupSetting.vue export default {name: groupSettings,components: {groupSettings}, </script>答应我&#xff0c;你的子组件引入名称一定不能和name一样&#xff01;&#xff01;&#xff01;
阅读更多...
IPv6和IPv4在技术层面的区别

IPv6和IPv4在技术层面的区别

随着互联网的不断发展&#xff0c;IPv4地址资源已经逐渐枯竭&#xff0c;而IPv6地址的使用逐渐成为趋势。IPv6和IPv4作为互联网协议的两个版本&#xff0c;在技术层面存在许多区别。本文将从地址空间、地址表示方法、路由协议、安全性、移动性以及网络性能等方面对IPv6和IPv4进…
阅读更多...
精进单元测试技能 —— Pytest断言的艺术！

精进单元测试技能 —— Pytest断言的艺术！

本篇文章主要是阐述Pytest在断言方面的应用。让大家能够了解和掌握Pytest针对断言设计了多种功能以适应在不同测试场景上使用。 了解断言的基础 在Pytest中&#xff0c;断言是通过 assert 语句来实现的。简单的断言通常用于验证预期值和实际值是否相等&#xff0c;例如&#…
阅读更多...
python-查漏补缺笔记-更新中

python-查漏补缺笔记-更新中

包导入时__init__.py中命令的执行顺序和sys.modules变化 ref: https://edu.csdn.net/skill/practice/python-3-6/164 在有父包和子包的情况下&#xff0c;父包中的“ __ init__.py”语句会在子包的“ __ init__.py”语句之前执行&#xff0c;然后按下列顺序执行导入子包和模块…
阅读更多...
Python selenium 自动化脚本打包成一个exe文件(推荐)

Python selenium 自动化脚本打包成一个exe文件(推荐)

目标 打包Python selenium 自动化脚本&#xff08;如下run.py文件&#xff09;为exe执行文件&#xff0c;使之可以直接在未安装python环境的windows下运行 run.py文件源码&#xff1a; 文件路径&#xff1a;D:\gongcheng 注&#xff1a;chromedriver.exe 文件在D:\gongchen…
阅读更多...
嵌入式Linux之MX6ULL裸机开发学习笔记（IMX启动方式-启动设备的选择）

嵌入式Linux之MX6ULL裸机开发学习笔记（IMX启动方式-启动设备的选择）

一,硬件启动方式选择 1.启动方式的选择 6ull支持多种启动方式。 比如可以从 SD/EMMC、 NAND Flash、 QSPI Flash等启动。 6ull是怎么支持多种外置flash启动程序的。 1.启动方式选择&#xff1a; BOOT_MODE0 and BOOT_MODE1&#xff0c;这两个是两个IO来控制的&#xff0c;…
阅读更多...
从技术角度分析：HTTP 和 HTTPS 有何不同

从技术角度分析：HTTP 和 HTTPS 有何不同

网络安全问题正变得日益重要&#xff0c;而 HTTP 与 HTTPS 对用户数据的保护十分关键。本文将深入探讨这两种协议的特点、工作原理&#xff0c;以及保证数据安全的 HTTPS 为何变得至关重要。 认识 HTTP 与 HTTPS HTTP 的工作原理 HTTP&#xff0c;全称超文本传输协议&#xf…
阅读更多...
哪种猫粮好？最好的主食冻干猫粮品牌排行榜

哪种猫粮好？最好的主食冻干猫粮品牌排行榜

虽然很多铲屎官可能认为给猫咪喂猫粮就足够了&#xff0c;但实际上猫咪对蛋白质的需求很高&#xff0c;并且作为肉食动物&#xff0c;它们更喜欢肉的味道。而冻干猫粮是采用低温和真空干燥处理技术将鲜肉制成&#xff0c;去除水分并保持蛋白质等营养物质不变性&#xff0c;同时…
阅读更多...
leaflet呼吸闪烁效果

leaflet呼吸闪烁效果

leaflet呼吸闪烁效果 1.功能背景 这个效果一把用于点击选中&#xff0c;报警提升效果。 2.功能开发 2.1 marker 这个效果还是很好实现&#xff0c;主要通过计时器设置透明度的组合实现。 function setTargetSelect(e){var i 1var int setInterval(() > {if(!e._map…
阅读更多...
华为bgp之多级RR及团体属性、正则表达式多种应用案例

华为bgp之多级RR及团体属性、正则表达式多种应用案例

1、实现总部和分部的oa、财务网段互通 2、分部之间oa也能互通 3、分部之间不能互通财务 主要用到bgp自定义团体属性、一级二级RR配置、bgp正则表达式匹配规则 R1 router id 1.1.1.1 //配全局地址池&#xff0c;又可以给ospf用也可以给bgp用 interface GigabitEthernet0/0/0 …
阅读更多...
时序预测 | Matlab实现GJO-VMD-LSTM金豺-变分模态分解-长短期记忆网络时间序列预测

时序预测 | Matlab实现GJO-VMD-LSTM金豺-变分模态分解-长短期记忆网络时间序列预测

时序预测 | Matlab实现GJO-VMD-LSTM金豺-变分模态分解-长短期记忆网络时间序列预测 目录 时序预测 | Matlab实现GJO-VMD-LSTM金豺-变分模态分解-长短期记忆网络时间序列预测预测效果基本介绍模型设计程序设计参考资料 预测效果 基本介绍 Matlab实现GJO-VMD-LSTM金豺-变分模态分…
阅读更多...
JAVA集合框架总结

JAVA集合框架总结

集合框架概述 1.1 生活中的容器 1.2 数组的特点与弊端 一方面&#xff0c;面向对象语言对事物的体现都是以对象的形式&#xff0c;为了方便对多个对象的操作&#xff0c;就要对对象进行存储。另一方面&#xff0c;使用数组存储对象方面具有一些弊端&#xff0c;而Java 集合就…
阅读更多...
使用 pg_stat_statements 优化查询

使用 pg_stat_statements 优化查询

使用 pg_stat_statements 优化查询 就使用量和社区规模而言&#xff0c;PostgreSQL 是增长最快的数据库之一&#xff0c;得到许多专业开发人员的支持&#xff0c;并得到广泛的工具、连接器、库和可视化应用程序生态系统的支持。 PostgreSQL 也是可扩展的&#xff1a;使用 Postg…
阅读更多...
这款IDEA插件真的爽，白嫖真香

这款IDEA插件真的爽，白嫖真香

Apipost-Helper是由Apipost推出的IDEA插件&#xff0c;写完接口可以进行快速调试&#xff0c;且支持搜索接口、根据method跳转接口&#xff0c;还支持生成标准的API文档&#xff0c;注意&#xff1a;这些操作都可以在代码编辑器内独立完成&#xff0c;非常好用&#xff01;这里…
阅读更多...
室内效果图没有质感？外国大神这6个实用技巧，带你轻松掌握！

室内效果图没有质感？外国大神这6个实用技巧，带你轻松掌握！

为了创作出高级有质感的效果图&#xff0c;我们需要注意构图、颜色、布光等多种因素&#xff0c;以打造出逼真的渲染效果。不过不要担心&#xff01;今天小编带来了国外知名设计师Arch Viz Artist在油管上分享的6个实用小技巧。看完带你轻松提升室内效果图的表现力&#xff01;…
阅读更多...
指针数组做main函数的形参

指针数组做main函数的形参

目录 ​编辑 1. 指针数组 1.1 基本概念 1.2 简单示例 2. 指针数组做main形参 2.1 int main(int argc, char *argv[]); 2.2 简单示例 1. 指针数组 1.1 基本概念 指针数组是指一个数组&#xff0c;其中的每个元素都是指针。 这意味着数组中的每个元素都存储一个地址&…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站