首先为了项目的复用性 我在刚进公司的时候 就结合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中的坑