添加商品列表页面的编译模式
在这里插入图片描述

定义请求的参数对象

参考api文档定义的queryObj

在这里插入图片描述

现在把参数传递给queryObj

在这里插入图片描述

获取商品列表数据

在这里插入图片描述

在这里插入图片描述

为了防止某些商品的图片不存在，需要在data中定义一个默认的图片

在这里插入图片描述

美化商品列表页面的UI结构
在这里插入图片描述

把商品tem项封装为自定义组件

在这里插入图片描述

将上面的item项的代码复制到这里

在这里插入图片描述

组件被调用

在这里插入图片描述

使用过滤器处理商品价格

在这里插入图片描述

实现上拉加载更多

打开项目根目录中的pages.son配置文件，为subPackages分包中的goods_1ist页面配置上拉触底的距离
在goods1ist页面中，和methods节点平级，声明onReachBottom事件处理函数，用来监听页面的上拉触底行为
改造methods中的getGoodsList函数，当列表数据请求成功之后，进行新旧数据的拼接数处理

在这里插入图片描述

在这里插入图片描述

通过节流阀防止发起额外的请求
在这里插入图片描述

如果在请求第二页数据的时候，就不应该再去请求后面的数据（等请求好了之后，再去请求）

1.在data中定义isloading节流阀
2.修改geGoodsList方法，在请求数据前后，分别打开和关闭节流阀
3.在onReachBottom底事件处理函数中，根据节流阀的状态，来决定是否发起请求

在这里插入图片描述

判断数据是否加载完毕，避免发起额外的数据请求

在这里插入图片描述

为了避免上面的情况，需要判断判断数据是否加载完毕

如果下面的公式成立，则证明没有下一页数据了：
	当前的页码值*每页显示多少条数据>=总数条数
	pagenum * pagesize ≥ total

在这里插入图片描述

商品列表页面下拉刷新

1、在pages.json配置文件中，为当前的goods_1ist页面单独开启下拉刷新效果
2.监听页面的onPullDownRefresh事件处理函数
3.修改getGoodsList函数，接收cb回调函数并按需进行调用

在这里插入图片描述

在这里插入图片描述

改造一下getGoodsList函数，让他能接受这个回调函数

在这里插入图片描述

在这里插入图片描述

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

1.将循环时的b1ock组件修改为view组件，并绑定c1ick点击事件处理函数。因为block组件不支持绑定click()事件
2.在methods节点中，定义gotoDetail事件处理函数

在这里插入图片描述

# uni-app
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

openEuler系统通过shell脚本安装openGauss 5.0.0企业版

avatar 华为云开发者联盟
cover

一文了解npm install -g和npm install --save-dev的关系

avatar 华为云开发者联盟
cover

【FAQ】HarmonyOS SDK 闭源开放能力 —Map Kit（2）

avatar 华为云开发者联盟