vue+iScroll 前端模拟上拉加载数据

分页这个东西, 其实更多的还是后端来弄, 但是由于公司项目的特殊性 我们是先访问接口,c#那边写下载程序,每天机器自启的时候,会自动重新下载每天最新的数据来覆盖之前的json数据.如果是内嵌在安卓里面的话 是安卓来下载.

首先为了项目的复用性 我在刚进公司的时候 就结合vue脚手架弄了一个基于公司业务的通用脚手架,这样其他同事在做其他项目的时候, 直接下载就好,就不用再重复写每个项目差不多的逻辑代码.下面的代码是基于公司项目的,跟网上的可能不一样

基于iscroll做了一个通用的滚动组件

vue的slot这个是个好东西, 代码不多说了, 大家肯定看得懂, 封装了这个之后就不用再去重复的new一个iscroll了,直接引用这个组件就行, 这里list是必传的.

在需要用到的父组件里面引用 传入pullUp为true

这样就会向外派发事scrollToEnd事件,滚动组件这一块逻辑就完了.这里shopItem其实就是li标签因为有很多页面都要用到 所以这里就抽成了一个组件,这里也可以把它做成函数组件来节约性能.

然后就是上拉加载数据了. 首先在data定义下面四个变量, 这里为啥要有showMore标志位呢,因为在滚动到底部的时候你是要去异步请求数据的这个中间有时间差,如果在这个时间差中, 我数据在请求而你这个时候又去滑了一下,这个结果可以想出来肯定是...对吧!所以我们需要一个标志位来确定我们是不是在请求数据当中.

然后我们在methods定义一个方法.

传入pageIndex页数, 在这个方法里面我们把data定义的pageIndex等于传进来的pageIndex(其实也就是data的pageIndex), data里面的pageList等于你的总数据(也就是上面的this.brandList),然后调用数组slice方法.弄完之后一定要记得把showMore置为false.

brandList是存放在vuex里面的shopList的副本, 那有的人可能有疑问了, 为啥要slice一下呢,这是怕代码写着写着就改变了shopList数组.还记得这个shopList是存放在vuex里面的吗. 在vuex里面改变数据只能通过mutation方式,所以这里是防止bug产生.顺便再放一张vuex流程图

最后就是我们的滚动到底部的逻辑.

我们这里判断showMore的状态只有false的时候,才去加载, 那有的人可能就有疑问了上面的showMore不是true吗, 在哪个地方置为false的,在activated生命周期的时候我们就去调用了一次loadMore方法,而在loadMore方法最后一行, 我们把它置为了false, 所以你第一次滚动到底部的时候, 这个时候showMore一定是false, 既然是false, 那么就会走第二个if判断, 在这个里面我们先把showMore置为true, 这个状态的操作一定要在调用loadMore方法之前.因为我们在loadMore方法里会再把它置为false,那么你下次滚动底部的时候才会继续走这个if判断.loadMore方法里面就会去对总数据做一个slice处理.那么为啥先讲第二个if呢, 因为这是按照我代码逻辑来的,我都是先写完功能,再来测试, 只要判断pageList数组长度大于等于总数据长度就return出去不要让它再执行就可以了.这样就前端模拟了分页处理.如果你想换个分页方式,也就是类似换一批这种,显示0-9,10-19,只显示当前页的数据,只要把loadMore方法第二行代码改一下

把pageIndex-1再乘以每页显示数据,这样就实现了点击换一批的逻辑.有的网站聚焦搜索框的时候右上角有一个换一换按钮, 这个分页其实就是前端实现的, 因为没必要点一次就去进行一次http请求

如果走的是api接口请求, 那就更简单了只需要传页数给后台就行, 前端这边只需要做标志位的处理就行.

最后只希望vue3.x早点结束beta可以正式进入production,早点结束我的mixins之旅.附上一张我的项目结构目录还是比较标准的.这个项目比较小所以mixin不是很多.之前涉及人脸语音的项目mixin几十个维护起来哎...

如果有人负责公司脚手架的,可以把脚手架做成命令行方式 ,通过vue create方式创建基于公司业务来创建项目,可以参考我github里面的cli仓库 直接克隆下来 改一下里面的代码 就跟vue这些脚手架一样了

https://github.com/nangongxiaomo/cli.欢迎大家指出错误 共同进步.下一篇来讲一下vue-awesome-swiper在vue中的坑