摘要：建议，每个栏目下放一个空列表组件，将空组件放在下拉刷新组件里面。下拉刷新请求两次。请求结束后必须把下拉刷新绑定的置为，要不然又会多请求一次魅族手机按键返回桌面，再重新回到后列表上下划不动。魅族的返回键问题，在换用列表插件后得到解决。
Vant ui + Vue.js 部分组件实践
功能需求是实现一个移动端的栏目列表切换，于此同时列表需要进行下拉刷新，上拉加载
如下图，大概是一个这样的东西
看起来是挺简单的，实现起来很方便。没错，我当时也是这么想的，结果满心欢喜就开始在前一个前端写好的的vantui 基本结构下开始编写代码。
代码如下,当然这是我已经修改过的代码。
下面来说说遇到的一些坑
引入一个空列表组件，由于html结构使用不当，导致展示出现问题。建议，每个tab栏目下放一个空列表组件，将空组件放在下拉刷新组件里面。
莫名其妙的就请求了一次数据接口。这个是由于List上拉加载导致的，需要理清楚loading、finish、offset这两个参数的使用，什么时候加载中，什么时候结束加载。finish是停止请求的开关。offset是请求开关打开后判断是否请求的标准。由于暂时不知名的坑，部分测试的安卓机在APP里面打开用相同的参数请求两次，我的解决办法是，根据pageSize和pageIndex用splice方法进行替换，就算你连续请求三次 但是我每次都给你替换掉。
下拉刷新请求两次。下拉刷新一般是清空现有列表然后请求一次数据接口和上拉加载的接口一样，请求前把pageIndex置为零。请求结束后必须把下拉刷新绑定的isLoading置为false，要不然又会多请求一次.
魅族手机按home键返回桌面，再重新回到APP后 列表上下划不动。这个暂时没找到解决方案，个人觉得是webview在退出后，再返回插件获取高度失败导致滑动被锁死。
vant-ui 的tab和列表组件连用，会对数据进行缓存，建议不要在改变tab的时候强制去请求一次，会出现数据重复的问题。
本文用于上周实践总结，有说的不对的欢迎指出--------------------------------------------------分割线----------------------------------------------
2019年3月
因为有部分机型不兼容，所以把这块功能重构了，发现之前的思路存在一定问题。其实完全可以只使用一个列表盒子，缓存可以用vuex 或者localStorage，看具体的需求。魅族的返回home键问题，在换用列表插件后得到解决。文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/108418.html
摘要：一背景业务组件化或者叫模块化作为移动端应用架构的主流方式之一，近年来一直是业界积极探索和实践的方向。有赞移动团队自年起也在不断尝试各种组件化方案，在有赞微商城，有赞零售，有赞美业等多个应用中进行了实践。相比组件，个人感觉称之为模块更为合适。 一、背景 业务组件化（或者叫模块化）作为移动端应用架构的主流方式之一，近年来一直是业界积极探索和实践的方向。有赞移动团队自16年起也在不断尝试各种...
摘要：第三个就是比较重点的内容，在有赞的实践。第四部分是将实时计算化，界面化的一些实践。二有赞实时平台架构有赞的实时平台架构呢有几个主要的组成部分。实时平台提供了集群管理，项目管理，任务管理和报警监控的功能。。 一、前言 这篇主要由五个部分来组成： 首先是有赞的实时平台架构。 其次是在调研阶段我们为什么选择了 Flink。在这个部分，主要是 Flink 与 Spark 的 structure...
摘要：第三个就是比较重点的内容，在有赞的实践。第四部分是将实时计算化，界面化的一些实践。二有赞实时平台架构有赞的实时平台架构呢有几个主要的组成部分。实时平台提供了集群管理，项目管理，任务管理和报警监控的功能。。 一、前言 这篇主要由五个部分来组成： 首先是有赞的实时平台架构。 其次是在调研阶段我们为什么选择了 Flink。在这个部分，主要是 Flink 与 Spark 的 structure...
摘要：是一款下拉刷新插件，开放一些钩子函数，可以在刷新的各种状态中做一些操作，包括刷新中的动画及操作，另外开放下拉框的实时下拉数据，可以完全自定义自己的下拉组件，做出不同下拉动画效果。 pullRefresh.js pullRefresh.js 是一款下拉刷新插件，开放一些钩子函数，可以在刷新的各种状态中做一些操作，包括刷新中的动画及dom操作，另外开放下拉框的实时下拉数据，可以完全自定义自...
阅读 1053·2021-10-09 09:43
阅读 18027·2021-09-22 15:52
阅读 1027·2019-08-30 15:44
阅读 3015·2019-08-30 15:44
阅读 3197·2019-08-26 14:07
阅读 878·2019-08-26 13:55
阅读 2536·2019-08-26 13:41
阅读 3050·2019-08-26 13:29
