位置: 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响应式对象数组)

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

  • 湖南浏阳街道干部上门殴打居民被开除党籍、政务撤职

    湖南浏阳街道干部上门殴打居民被开除党籍、政务撤职

  • 微博推广营销方法:做有营销的内容(微博推广营销方式)

    微博推广营销方法:做有营销的内容(微博推广营销方式)

  • qq怎么登录新用户不用好友验证(qq怎么登录新用户没有手机号)

    qq怎么登录新用户不用好友验证(qq怎么登录新用户没有手机号)

  • 华为手机页面天气日期不在了怎么办(华为手机页面天气预报)

    华为手机页面天气日期不在了怎么办(华为手机页面天气预报)

  • 微信已实名认证但不能收红包怎么办(微信已实名认证但未传身份证)

    微信已实名认证但不能收红包怎么办(微信已实名认证但未传身份证)

  • 8p后盖碎了漏电吗(8p后盖碎了漏电怎么办)

    8p后盖碎了漏电吗(8p后盖碎了漏电怎么办)

  • 优酷账号可以几个人用(优酷账号可以几个设备)

    优酷账号可以几个人用(优酷账号可以几个设备)

  • 直播流量扶持是什么意思(抖音直播流量扶持)

    直播流量扶持是什么意思(抖音直播流量扶持)

  • 库乐队怎么设置不了了(库乐队怎么设置铃声)

    库乐队怎么设置不了了(库乐队怎么设置铃声)

  • regedit怎么打开(regedit怎么打开分辨率)

    regedit怎么打开(regedit怎么打开分辨率)

  • iphone下拉悬停有啥用(iphone下拉悬停是干嘛的)

    iphone下拉悬停有啥用(iphone下拉悬停是干嘛的)

  • gpu缩放有什么用(gpu缩放有什么用吗)

    gpu缩放有什么用(gpu缩放有什么用吗)

  • 如何发微信30分钟长视频(微信怎么可以发30分钟的视频)

    如何发微信30分钟长视频(微信怎么可以发30分钟的视频)

  • 远程热点故障是什么意思(远程热点故障是哪个手机的问题)

    远程热点故障是什么意思(远程热点故障是哪个手机的问题)

  • word怎么设置纸张大小(word怎么设置纸张方向有竖有横)

    word怎么设置纸张大小(word怎么设置纸张方向有竖有横)

  • 滴滴出行特惠拼车是什么(滴滴出行特惠拼车如果拼不上)

    滴滴出行特惠拼车是什么(滴滴出行特惠拼车如果拼不上)

  • 华为mate30双卡怎么插(华为mate30双卡怎么插卡)

    华为mate30双卡怎么插(华为mate30双卡怎么插卡)

  • 快手怎么删照片(快手上照片怎么删)

    快手怎么删照片(快手上照片怎么删)

  • 两个手机如何共享屏幕(两个手机如何共用一个钉钉号登录)

    两个手机如何共享屏幕(两个手机如何共用一个钉钉号登录)

  • lightroom如何去紫边(lightroom去掉某个物体)

    lightroom如何去紫边(lightroom去掉某个物体)

  • x27屏幕尺寸(vivix27屏幕尺寸)

    x27屏幕尺寸(vivix27屏幕尺寸)

  • i12 tws耳机是什么牌子的(i12耳机是什么意思)

    i12 tws耳机是什么牌子的(i12耳机是什么意思)

  • 微信在新手机如何登录(微信在新手机如何下载)

    微信在新手机如何登录(微信在新手机如何下载)

  • qq闺蜜关系怎么弄(qq闺蜜关系怎么改时间)

    qq闺蜜关系怎么弄(qq闺蜜关系怎么改时间)

  • 税财通财务软件下载
  • 私车公用如何处理
  • 固定资产税前一次性扣除
  • 库存商品和固定资产
  • 审计报告印花标
  • 稽查查补税款能缓缴
  • 银行汇票使用流程举例
  • 教育服务增值税纳税义务发生时间
  • 子公司注销是利空吗
  • 刷信用卡的手续费去哪了
  • 交易性金融资产的交易费用计入哪里
  • 购买无形资产的价款超过正常信用
  • 抵债的货物按什么算增值税
  • 服务性合同签了能反悔吗
  • 购买理财产品是不是非法集资
  • 快递费税率是6还是9
  • 最优五种个人捐赠方式税务比较?
  • 增值税专用发票校验码是哪个位置
  • 出口信用证议付支出是什么
  • 购买厂房可以一次买卖吗
  • 打开游戏时总是出现需要新应用打开此MS
  • android 设置按钮颜色
  • 专项储备通俗理解
  • 个人交五险一金和单位交五险一金的区别
  • php 生成opcode
  • 营改增后劳务发票税率
  • 多源传感器融合
  • 木卫一距离木星多远
  • 税法的构成要素中,()是税法最基本的要素
  • 收入和支出怎么合计
  • 小企业成本管理方法
  • 高新企业研发人员学历要求
  • php function函数的用法
  • 关税组成计税价格公式推导
  • yum命令详解
  • ech命令
  • php获取前一天的时间
  • 当月增加的房产 要交房产税吗
  • 银行利息的收入计入什么科目
  • 合伙企业的经营所得税率
  • 固定资产一次性折旧账务处理
  • 不同会计制度资产负债表金额不一样
  • 零申报企业所得税季度申报表怎么填写
  • wordpress禁止更新插件
  • 会计caac是什么意思
  • 投资性房地产由成本模式转为公允价值模式差额计入
  • 固定资产折旧方法一经确定不得随意变更
  • 购买的矿泉水能卖吗
  • sqlserver2008实例配置
  • 解决问题
  • 外出经营流程
  • 已经认证抵扣的发票会计分录
  • 持有至到期投资减值准备可以转回吗
  • 国家知识产权专利网
  • 营改增后工程结算的账务处理
  • 建筑业确认收入的条件
  • 银行贷款给个人用于经营属于消费贷款
  • navicat连接教程
  • ssh访问windows
  • Linux系统中管理员如何获得root权限
  • centos安装完成后重启进不去
  • win10预览版最新
  • windows一键安装
  • linux 文字处理
  • 升级win10免费吗
  • win7 windows检测到ip地址冲突怎么解决
  • linux如何查看防火墙配置
  • win10安装的中文包在哪
  • jquery教程
  • android打包v1v2
  • css如何用
  • jq倒计时代码
  • jQuery中ajax的load()与post()方法实例详解
  • 简单的智能家居
  • python 系统监控
  • jquery 跨域方法
  • swift method swizzling
  • 国家税务局公告2021年第3号
  • 福建地方税务局招聘
  • 矿山耕地占用税计入什么科目
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设