全部标签
写点什么
MySQLOpenHarmony云计算程序员行业资讯算法Python人工智能区块链Linux前端个人成长面试架构师编程企业动态新基建敏捷安全读书笔记高效工作团队管理创业生涯规划知识管理运维产品经理 查看更多

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

作者：计算机魔术师
  • 2022 年 8 月 30 日
    广东

  • 本文字数：2641 字

    阅读完需：约 9 分钟


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


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


还没有账户的小伙伴<font size=5> 速速点击链接登录注册把！🎉🎉


该文章收录专栏✨ 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. 效果

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

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

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 goodlist
git checkout master 
git merge goodlist
git push 
git branch -d goodlist
复制代码



七、小结

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


  1. 获取列表数据

  2. 渲染列表数据结构到页面

  3. 美化样式

  4. 下拉刷新请求数据（ 经典参数：请求数据关键字、页码数、每页数据量、其他属性等， 经典接口返回数据：状态 meta(是否查询成功）、所含数据总数、）

  5. 下拉刷新节流阀

  6. 上拉刷新重新加载数据

  7. 为列表项添加链接


<hr>


    🤞到这里，如果还有什么疑问🤞🎩欢迎私信博主问题哦，博主会尽自己能力为你解答疑惑的！🎩    🥳如果对你有帮助，你的赞是对博主最大的支持！！🥳
复制代码


划线
评论
复制
发布于: 刚刚阅读数: 3
8月月更
用户头像

计算机魔术师

关注

还未添加个人签名 2022.08.13 加入

还未添加个人简介

评论

发布
暂无评论
Copyright © 2022, Geekbang Technology Ltd. All rights reserved. 极客邦控股（北京）有限公司 | 京 ICP 备 16027448 号 - 5京公网安备京公网安备 11010502039052号
【小程序项目开发-- 京东商城】uni-app之商品列表页面 （下）_8月月更_计算机魔术师_InfoQ写作社区