订单列表组件相关笔记

订单列表组件相关笔记

一.调整Order父组件结构：
在刚开始讲order父组件结构的时候，我们发现orderlist orderpay orderconfirm等子组件 都有orderheader组件作为头部，，只是内容不同我们当时觉得在order父组件进行封装，由于路由的不同进行内容修改很棒
封装方法如下：

但是我们发现一个问题：
mounted生命周期，只有在第一次加载渲染页面时，才会触发。当我们从订单确认组件跳转到订单列表的时候，不会触发mounted生命周期，会导致订单列表的orderheader组件的内容还是订单确认的，只有重新刷新页面，才会重新渲染数据。
所以，这种方法不可行，需要orderlist orderpay orderconfirm每个子组件，单独插入orderheader组件，单独传值。

二.数据渲染：
1》注意两层循环嵌套：

2》再次复习 vue-router传参方式：
vue-router传参方式

同时注意后端把我们要引用的图片放到了cdn上面，为什么呢？
cdn是一款加速服务器，把图片缓存到服务器上面，前端加载速度非常得快，加速的原因：
①. 服务器里面已经把这个图片缓存下来了，用户拉取很快
②.分摊了带宽，若把图片都放在了自己服务器上面，自己服务器的带宽拉得很高，若把图片放到另外一台服务器上就会分流，分摊带宽。

三.loading和 Nodata优化：

1》loading优化：
在之前支付宝支付的时候已经创建过loading，这个组件就是在接口调用渲染数据之前，先懒加载一个图片，当接口调用渲染数据成功后，就消失，优化用户体验。

要先引入loading组件

2》NoData优化：
当用户没有任何订单，进入我的订单列表，会发现一片空白，为了防止误会成bug，我们在这种情况显示一张图片：

首先我们创建一个NoData组件，里面就是这个图片和文字，然后进行引入

（用【】模拟空数据）

要在loading结束后，显示这个图片

四.分页器制作：
（一）.第一种用element-ui的pagination
我们采用如下分页器

参数：

事件：

我们这个项目主要用的是current-change自定义事件，还要注意回调参数为当前页

1》引入：

2》设置参数：

total在订单接口中就可以获取

3》自定义跳转分页器current-change事件：


上面说到了，current-change事件的回调参数为当前页，所以可以直接获取到pagenum, 然后赋予this.pagenum，pagenum更新后，重新拉取订单接口，此时要赋予订单接口参数！！！

这样就基本完成了分页效果：

但是我们一般都放在右边，赋予一个class：

--------------------------------------------------------------------------------------------

（二）.第二种分页方式，加载更多按钮：

给分页器先隐藏

根据文档：

loading值我们之前控制过，我们直接用，但是也要进行一些调整

定义点击事件：


list要进行数组拼接而不是覆盖

到这我们还需要完善一个问题，就是一直加载更多，加载到最后一个加载更多按钮应该消失，我们应该进行完善



res.hasNextPage为接口返回值，为true说明还有下一页，false则当前页为最后一个

--------------------------------------------------------------------------------------------

（三）.第三种分页方式，滚动加载更多：

1》下载vue-infinite-scroll插件：
npm install vue-infinite-scroll --save

2》引入：

3》配置指令，注意infiniteScroll是一个指令

3》配置参数


3》配置scrollMore事件