郑州市建设厅网站,急招平面设计3名,园区二学一做网站,网站开发文档需求撰写wordVant ui Vue.js 部分组件实践功能需求是实现一个移动端的栏目列表切换#xff0c;于此同时列表需要进行下拉刷新#xff0c;上拉加载如下图#xff0c;大概是一个这样的东西看起来是挺简单的#xff0c;实现起来很方便。没错#xff0c;我当时也是这么想的#xff0c;结…Vant ui Vue.js 部分组件实践功能需求是实现一个移动端的栏目列表切换于此同时列表需要进行下拉刷新上拉加载如下图大概是一个这样的东西看起来是挺简单的实现起来很方便。没错我当时也是这么想的结果满心欢喜就开始在前一个前端写好的的vantui 基本结构下开始编写代码。代码如下,当然这是我已经修改过的代码。v-modelnewsIsRefreshingrefreshonNewsRefreshv-show!showVoid_b:offset300v-model newsLoading:finished newsFinishedload getNewsstyle padding-bottom: 2rem;v-for (item, index) in news_list:listInfo item:key index:activeIndex activestyle margin: .5rem;下面来说说遇到的一些坑引入一个空列表组件由于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键问题在换用列表插件后得到解决。--------------------------------------------------分割线----------------------------------------------2019年11月由于最近访问较多提醒一下。vant ui中的list组件加载数据*不需要在引入list的组件中的mounted和created中调用获取数据请求
