【小程序项目开发– 京东商城】uni-app之商品列表页面 (下)

【小程序项目开发-- 京东商城】uni-app之商品列表页面 (下)

🤵‍♂️ 个人主页: @计算机魔术师 👨‍💻 作者简介:CSDN内容合伙人,全栈领域优质创作者。

🌐 推荐一款找工作神器网站: ​​点击跳转牛客网​​ |笔试题库|面试经验|实习招聘内推|

还没有账户的小伙伴 ​​速速点击链接登录注册把!🎉🎉​

该文章收录专栏✨ 2022微信小程序京东商城实战 ✨

@[toc]

一、上拉加载更多数据

1. 在 pages.json 中配置上拉刷新&上拉距离

,{                    "path" : "goods_list/goods_list",                    "style" :                                                                                                    {                 // 下拉刷新距离                    "onReachBottomDistance": 150                }

2. 定义上拉触底行为

onReachBottom( ) {      // 显示加载效果       uni.showLoading({        title:"数据请求中..."      })      //  页面数自增加一      this.queryObj.pagenum ++      // 再次请求数据      this.getGoodlist()      // 隐藏加载效果      uni.hideLoading()    },

3. 修改调取数据方法

methods: {      async getGoodlist() {        const {          data: res        } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)        console.log(res)        if (res.meta.status != 200) return uni.$showMsg("数据调取失败")        // 展开拼接        this.goodlist = [...this.goodlist,...res.message.goods]        this.total = res.message.total      }    },

4. 效果

【小程序项目开发-- 京东商城】uni-app之商品列表页面 (下)

二、设置节流阀控制数据请求

我们在下拉刷新过程会由于 网速慢或各种原因,数据请求慢,此时我们在还没请求到数据又下拉刷新一次,但此时 数据还未加载完成(函数还未运行完) ,此时页数加一,后面等到数据 再次请求就不是下一页

1. 定义节流阀

data() {      return {        // 节流阀         isLoading : false·······

2. 添加判断

在获取数据前设置为true(允许加载数据,添加页码后设置为false,真正请求到数据在设置为true)

onReachBottom() {          // 显示加载效果      uni.showLoading()      // 如果正在加载 跳出函数      if  (this.isLoading) return            //  页面数自增加一      this.queryObj.pagenum++      // 再次请求数据      this.getGoodlist()      // 隐藏加载效果      uni.hideLoading()    }, methods: {      async getGoodlist() {        // 此时开始加载 设置为 true        this.isLoading = true        const {          data: res        } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)        console.log(res)        if (res.meta.status != 200) return uni.$showMsg("数据调取失败")        // 展开拼接        this.goodlist = [...this.goodlist, ...res.message.goods]        this.total = res.message.total        // 请求成功 设置为false ( 没有走完函数是不允许再次请求)        this.isLoading = false      }

3. 效果

【小程序项目开发-- 京东商城】uni-app之商品列表页面 (下)

三、判断是否加载数据完毕

  • 在​ ​onReachButtom​​函数中修改如下 ( 这里我们假设你的数据条数为23条)
onReachBottom() {      // 判断是否加载完毕      // 方法一 ( 总长度相加 )      if (this.goodlist.length + this.queryObj.pagesize >= this.total) return uni.$showMsg('没有更多的数据啦...')      // 方法二 ( 页面数 * 页面数据条数)      // if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('没有更多的数据啦...')

【小程序项目开发-- 京东商城】uni-app之商品列表页面 (下)

四、 上拉刷新效果

1. 配置可下拉刷新

【小程序项目开发-- 京东商城】uni-app之商品列表页面 (下)

2. 监听事件函数(重置全部数据)

onPullDownRefresh() {      // 重置所有数据      this.queryObj.pagenum = 1      this.goodlist = []      this.total = 0      this.isLoading = false      // 重写获取数据,并传箭头函数进行取消下拉刷新      this.getGoodlist(() => uni.stopPullDownRefresh())    },

3. 修改获取数据函数(添加停止下拉刷新)

async getGoodlist(callback) {        // 此时开始加载 设置为 true        this.isLoading = true        const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)        console.log(res)        // 取消下拉刷新 (如果有则往后走达到存在则允许函数的效果)        callback && callback()        // 请求成功 设置为false (没有走完函数是不允许再次请求)        this.isLoading = false        // 隐藏加载效果        uni.hideLoading()        if (res.meta.status != 200) return uni.$showMsg("数据调取失败")        // 展开拼接        this.goodlist = [...this.goodlist, ...res.message.goods]        this.total = res.message.total      }

4. 效果

【小程序项目开发-- 京东商城】uni-app之商品列表页面 (下)

六、配置列表项链接跳转

1. 更改页面结构

将​ ​block​​​更改为​ ​view​​​,并添加​ ​onclick​事件跳转页面,由于需要更多的操作所以这里不单纯更改为​ ​navigator​​组件

<

2. 定义参数跳转函数

methods: {      goToUrl(item){        uni.navigateTo({          url:"/subpackages/goods_detail/goods_detail?goods_id=" + item.goods_id,        })      },

3. 效果

【小程序项目开发-- 京东商城】uni-app之商品列表页面 (下)

六、分支的提交

git add .git commit -m "商品分类页面开发完成"git push origin -u goodlistgit checkout master git merge goodlistgit push git branch -d goodlist

【小程序项目开发-- 京东商城】uni-app之商品列表页面 (下)

【小程序项目开发-- 京东商城】uni-app之商品列表页面 (下)

七、小结

在项目开发中经常会遇到列表页开发,如之前文章的搜索组件,显示建立列表 ✨ 京东商城uni-app之自定义搜索组件(中) ✨, 而这些列表页都有以下开发共性

  1. 获取列表数据
  2. 渲染列表数据结构到页面
  3. 美化样式
  4. 下拉刷新请求数据( 经典参数:请求数据关键字、页码数、每页数据量、其他属性等, 经典接口返回数据:状态meta(是否查询成功)、所含数据总数、
  5. 下拉刷新节流阀
  6. 上拉刷新重新加载数据
  7. 为列表项添加链接
🤞到这里来,如果有什么问题🤞🎩欢迎私信博主提问哦,博主们会尽力为您解答问题!如果🎩🥳对你有帮助,那么你的赞扬就是对博客作者最大的支持!🥳<details><summary>*<font color='gray'>[En]</font>*</summary>*<font color='gray'>🤞 to here, if there are any questions 🤞🎩 welcome private message blogger questions oh, bloggers will try their best to answer questions for you! If 🎩 🥳 is helpful to you, your praise is the greatest support for bloggers! 🥳</font>*</details>

Original: https://blog.51cto.com/u_15691039/5634530
Author: 计算机魔术师
Title: 【小程序项目开发– 京东商城】uni-app之商品列表页面 (下)

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/500260/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • python dict主要方法一览

    因为比较浅显易懂,所以直接上代码。 1. clear a = {"A": {"male": "18"}} a.clear…

    Python 2023年5月24日
    0147
  • 使用ChatGPT帮我们写一篇论文,最后查重的重复率会是多少?

    使用ChatGPT帮我们写一篇论文,最后查重的重复率会是多少? ChatGpt一经发布就大火,迅速应用在各个领域,尤其在程序圈自动帮我们写代码着实是圈了一大波粉。那么它用在科研领域…

    Python 2023年8月12日
    0159
  • Python数据分析案例03——天气K均值聚类分析

    聚类常用的算法肯定是K均值聚类了,本次案例采用陕西的十个地区的天气数据,构建特征,进行聚类分析。 首先数据都装在’天气数据’这个文件夹里面,如图: 打开其中…

    Python 2023年8月1日
    092
  • OpenFOAM 编程 | 求解捕食者与被捕食者模型(predator-prey model)问题(ODEs)

    0. 写在前面 本文问题参考自文献 (^{[1]}) 第一章例 6,并假设了一些条件,基于 OpenFOAM-v2206 编写程序数值上求解该问题。笔者之前也写过基于 OpenFO…

    Python 2023年10月16日
    0119
  • Python爬虫学习笔记-第十九课(Scrapy基础上)

    Scrapy基础上 1. pipline补充 2. items.py文件 3. 案例演示 * 3.1 思路分析 3.2 完整代码 3.3 案例总结: 1. pipline补充 se…

    Python 2023年10月5日
    0113
  • 字节跳动 DanceCC 工具链系列之Xcode LLDB耗时监控统计方案

    作者:李卓立 仲凯宁 背景介绍 在《字节跳动 DanceCC 工具链系列之Swift 调试性能的优化方案》[1]一文中,我们介绍了如何使用自定义的工具链,来针对性优化调试器的性能,…

    Python 2023年10月22日
    080
  • python安装scrapy失败_安装scrapy,以及出现的错误解决。

    首先我是在python3的环境上面完成的。我保留了python2的版本,然后安装python3的版本。然后在安装scrapy的过程中出现的错误,以及切换python版本后出现的错误…

    Python 2023年10月3日
    083
  • matplotlib入门

    目录 一,matplotlib简介 二,使用plt.plot()绘制直线、曲线、折线 三,使用plt.title()设置标题 四,风格的设置 五,使用xlabel()和ylabel…

    Python 2023年9月3日
    0130
  • Python 爬虫下载(爬取)笔趣阁小说下载

    一. 数据来源分析 确定需求 爬取笔趣阁小说内容 (一本) 进行搜索功能 (当输入一本小说名字或者作者选择下载相应的小说内容) 数据来源分析 二. 代码实现过程 发送请求 对小说章…

    Python 2023年5月24日
    0171
  • paddle使用指南

    文章目录 * – 一、10分钟快速上手飞桨:手写数字识别任务 – + 1.1 数据集定义 + 1.2 数据集加载 + * 1.2.1 直接加载内置数据集 *…

    Python 2023年8月2日
    0133
  • python入门06 动画精灵和碰撞检测pygame

    目录 动画精灵和碰撞检测 前提 一、动画精灵 ​ ①、一堆沙滩球都反弹 ②、让小球动起来 二、碰撞检测 矩形碰撞与像素完美结合 三、统计时间 用 pygame.time.Clock…

    Python 2023年9月20日
    0112
  • Docker进阶学习:docker-compose的体验

    安装好docker-compose后,我们要体验一下了解基础的操作和命令。 搞一个官方demo,python应用。 计数器。redis 我先来一个官方文档地址,基本很多都是按照文档…

    Python 2023年8月14日
    0106
  • Python开发一个滑雪小游戏

    擅长领域:Python开发一个小游戏今日重点:一步步分析and越过亚马逊的反爬虫机制 一、如何搭建开发环境环境 一起来学pygame吧 游戏开发30例(开篇词)——环境搭建+游戏效…

    Python 2023年9月19日
    072
  • Python采集彼岸4K高清壁纸

    前言 嗨喽,大家好呀~这里是爱看美女的茜茜呐 又到了学Python时刻~ ; 环境使用: Python 3.8 解释器 Pycharm 编辑器 模块 import re impor…

    Python 2023年11月4日
    090
  • Python:线性回归方差分析

    方差分析可以用来推断一个或多个因素在其状态变化时,其因素水平或交互作用是否会对实验指标产生显著影响。主要分为单因素方差分析、多因素无重复方差分析和多因素重复方差分析。 线性回归: …

    Python 2023年8月19日
    082
  • 6.1.Scrapy项目

    Scrapy项目(未登录的情况下) 首先,我们从不需要登录的场景下设计scrapy项目,我们使用scrapy获取信息。我们创建scrapy项目: (env) ….\TempSt…

    Python 2023年10月1日
    084
亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球