位置: IT常识 - 正文

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

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

推荐整理分享【小程序项目开发-- 京东商城】uni-app之商品列表页面 (下)(小程序项目开发流程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:微信小程序项目开发流程,微信小程序开发项目,小程序项目开发流程,小程序开发后怎么挣钱,微信小程序开发完整项目,小程序开发项目,微信小程序项目开发实战,小程序开发项目,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

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

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

文章目录一、上拉加载更多数据1. 在 pages.json 中配置上拉刷新&上拉距离2. 定义上拉触底行为3. 修改调取数据方法4. 效果二、设置节流阀控制数据请求1. 定义节流阀2. 添加判断3. 效果三、判断是否加载数据完毕四、 上拉刷新效果1. 配置可下拉刷新2. 监听事件函数(重置全部数据)3. 修改获取数据函数(添加停止下拉刷新)4. 效果六、配置列表项链接跳转1. 更改页面结构2. 定义参数跳转函数3. 效果六、分支的提交七、小结一、上拉加载更多数据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. 效果

三、判断是否加载数据完毕在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('没有更多的数据啦...')

四、 上拉刷新效果1. 配置可下拉刷新

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. 效果

六、配置列表项链接跳转1. 更改页面结构

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

< <!-- 列表页 --> <view class="goods-list"> <view v-for="(item,i) in goodlist" v-bind:key="i" @click="goToUrl(item)"> <my-goods :good="item"></my-goods> </view> </view>2. 定义参数跳转函数 methods: { goToUrl(item){ uni.navigateTo({ url:"/subpackages/goods_detail/goods_detail?goods_id=" + item.goods_id, }) },3. 效果

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

七、小结

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

获取列表数据渲染列表数据结构到页面美化样式下拉刷新请求数据( 经典参数:请求数据关键字、页码数、每页数据量、其他属性等, 经典接口返回数据:状态meta(是否查询成功)、所含数据总数、)下拉刷新节流阀上拉刷新重新加载数据为列表项添加链接 🤞到这里,如果还有什么疑问🤞🎩欢迎私信博主问题哦,博主会尽自己能力为你解答疑惑的!🎩 🥳如果对你有帮助,你的赞是对博主最大的支持!!🥳
本文链接地址:https://www.jiuchutong.com/zhishi/300302.html 转载请保留说明!

上一篇:vue3 响应式对象的 api 详解(vue3响应式对象数组)

下一篇:网络安全工具大合集(网络安全工具大全图片)

  • 钉钉密码是怎么组成的(钉钉密码怎么重置)

    钉钉密码是怎么组成的(钉钉密码怎么重置)

  • ios14.0鎻忚堪鏂囦欢涓嬭浇鍦板潃(ios14文件描述下载地址)(ios14.74)

    ios14.0鎻忚堪鏂囦欢涓嬭浇鍦板潃(ios14文件描述下载地址)(ios14.74)

  • 微信取消迅雷会员自动续费(微信关闭迅雷自动续费)

    微信取消迅雷会员自动续费(微信关闭迅雷自动续费)

  • word怎么做括号分支(word文档怎么弄括号)

    word怎么做括号分支(word文档怎么弄括号)

  • 蚂蚁庄园收麦子怎么收(蚂蚁庄园收麦子别人会知道吗)

    蚂蚁庄园收麦子怎么收(蚂蚁庄园收麦子别人会知道吗)

  • 三星a70s怎么截屏(三星a7手机截图怎么截)

    三星a70s怎么截屏(三星a7手机截图怎么截)

  • 爱奇艺怎么面对面快传(爱奇艺怎么面对面登录会员)

    爱奇艺怎么面对面快传(爱奇艺怎么面对面登录会员)

  • 钉钉共享播放视频为什么没有声音(钉钉视频共享窗口)

    钉钉共享播放视频为什么没有声音(钉钉视频共享窗口)

  • 苹果定位未找到位置是什么意思(苹果未找到位置)

    苹果定位未找到位置是什么意思(苹果未找到位置)

  • 华为手机能不能定位追踪(华为手机能不能隐藏应用)

    华为手机能不能定位追踪(华为手机能不能隐藏应用)

  • 华为安装不了应用是什么原因(华为安装不了应用 提示病毒)

    华为安装不了应用是什么原因(华为安装不了应用 提示病毒)

  • 开启内存xmp会伤电脑吗(内存开启xmp好处和坏处)

    开启内存xmp会伤电脑吗(内存开启xmp好处和坏处)

  • 网易云音乐单曲购买没了(网易云音乐单曲购买是什么音质)

    网易云音乐单曲购买没了(网易云音乐单曲购买是什么音质)

  • 5g优势到底在哪里(5g的三大优势)

    5g优势到底在哪里(5g的三大优势)

  • TP-LINK无线桥接失败怎么回事(tp-link无线桥接设置)

    TP-LINK无线桥接失败怎么回事(tp-link无线桥接设置)

  • 小米8充电器参数(小米八充电器型号)

    小米8充电器参数(小米八充电器型号)

  • 淘宝会员有什么用(淘宝会员有什么福利)

    淘宝会员有什么用(淘宝会员有什么福利)

  • 支付宝查steam交易账单(怎么在支付宝上查steam购买记录)

    支付宝查steam交易账单(怎么在支付宝上查steam购买记录)

  • vivo手机降温设置在哪(vivo手机降温模式在哪里)

    vivo手机降温设置在哪(vivo手机降温模式在哪里)

  • 电视接收棒怎么用(电视接收棒怎么拆)

    电视接收棒怎么用(电视接收棒怎么拆)

  • 安卓发短信怎么带特效(安卓发短信怎么切换主号副号)

    安卓发短信怎么带特效(安卓发短信怎么切换主号副号)

  • win10总是莫名其妙卡死(win10总是莫名其妙卡住,鼠标动不了)

    win10总是莫名其妙卡死(win10总是莫名其妙卡住,鼠标动不了)

  • 苹果xmax电池容量(iphone x x max电池容量)

    苹果xmax电池容量(iphone x x max电池容量)

  • 抖音解除拉黑对方知道吗(抖音解除拉黑对方后会推送吗)

    抖音解除拉黑对方知道吗(抖音解除拉黑对方后会推送吗)

  • 波折号怎么打(破折号怎么打出来)

    波折号怎么打(破折号怎么打出来)

  • 显示器dp接口和hdmi有什么区别(显示器dp接口是什么样子?)

    显示器dp接口和hdmi有什么区别(显示器dp接口是什么样子?)

  • uuto命令  将文件传送到远端的UUCP主机(umount命令详解)

    uuto命令 将文件传送到远端的UUCP主机(umount命令详解)

  • 固定资产一次性折旧的账务处理和税务处理
  • 报税日期是哪月哪天?
  • 会计上已资本化处理的工资企业所得税前应如何扣除?
  • 增值税发票管理办法及细则
  • 加计扣除产生的滞纳金
  • 律师事务所的所训
  • 过路费定额发票还能入账吗
  • 小微小型微利企业减按20%的所得税税率征收企业所得税
  • 预计所有者权益怎么计算
  • 小规模开票软件怎么下载
  • 运费的进项税
  • 所得税汇算清缴分录怎么做
  • 500元以内的商品都有哪些
  • 企业所得税可以抵扣吗
  • 发票复印件盖公章
  • 临时工工资为什么那么低?
  • 环保罚款计入什么会计科目
  • 自产的不同产品有哪些
  • 企业比赛奖品买什么好
  • 发票冲销后还能用吗
  • 价内税和价外税名词解释
  • 房产证没有可以补办吗
  • 30万的装修工程利润一般是多少
  • 小规模纳税人未开票收入如何做账
  • 费用报销单与付款申请单的用处区别
  • 经营性租赁怎么做账
  • 待认证发票后面需要做附件吗
  • 冲回累计折旧
  • 收到投资款怎么做记账凭证
  • 装修费可以作为开办费吗
  • 脚手架属于什么费用
  • 持有待售的非流动资产或处置组不再
  • PHP:mb_ereg_match()的用法_mbstring函数
  • 编译安装php7
  • 其他应付款的会计分录怎么写
  • vue trim
  • php生成验证码代码
  • 资产类备抵科目借方是加还是减
  • 营业外支出会计准则
  • 即征即退增值税属于政府补助吗
  • Request获取请求数据中文乱码问题
  • php点击跳转
  • 【AIGC】6、Segment Anything | Meta 推出超强悍可分割一切的模型 SAM
  • 10年未被强制修复!黑客利用Windows旧漏洞攻击通信公司并分发恶意文件
  • Node 下 Http Streaming 的跨浏览器实现
  • js中同步如何理解
  • 增值税销项税红字应如何报税
  • 自由会计服务类工作者
  • 织梦cms要钱吗
  • 加速折旧法是指在固定资产使用的早期少提折旧
  • 纳税申报个税如何申报
  • 发票额开多了多出的金额怎么处理?
  • 汽车租赁公司怎么办理
  • 挂靠单位账务处理是?
  • 物业公司代收电费可以差额征税吗
  • 2020年账簿印花税减免政策
  • 上一年度的费用怎么做会计分录
  • 坏账确认方法有哪些?
  • 公司汽车购置税怎么交
  • 开了票收不到钱怎么做账
  • windoes版本
  • win7旗舰版32位系统激活
  • windows7壁纸怎么恢复
  • win7玩游戏全屏
  • windos10正式版
  • ExtJS GridPanel 根据条件改变字体颜色
  • 激情台球游戏源码大全
  • Interlnk、Intersvr、Qbasic命令的使用方法
  • js遮罩效果
  • node.js在网页制作中的作用
  • 半透明图层怎么制作
  • 使用二氧化碳灭火器时人应该站在什么位置
  • 跟踪快件
  • 2、BluetoothChat之扫描设备DeviceListActivity.java
  • pythen开发环境
  • android ui自动化测试
  • python如何运用
  • 江苏省发票真伪查询网站
  • 无锡吴氏字辈
  • 下岗的党员需要交党费吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设