原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处
对于刷微博刷朋友圈的吃瓜群众,一定很了解这个功能吧,为防止流量走光光,只有当我滑到页面底部的时候才再次加载更多的数据,这里我写了一个低配版仿cnode社区的小程序,通过例子来解释该如何玩
1、进入页面,先加载个15条数据(这里调用的api在cnode社区有提供)
在后台封装一个getMoreData()方法,这个方法也是关键所在,在最后再告诉大家,现在只要知道每次调用这个方法页面就会多加载15条数据
这就是第一次加载友好的弹出一个loading框,然后加载15条数据显示
现在的问题是怎么判断页面滑倒了底部,正好
scroll-view标签中有个属性
这个属性可以监听当页面滑倒底部的时候执行后面自定义的方法,我的自定义方法名是lower
和onload里的方法差不多
最后就是重点了,也是我入坑的地方
这是我的data
第一个参数的格式是[{xxx:”xxx”,yyy:”yyy”,zzz,”zzz”},{},{},{},{},{},{}]
第二个参数是调用api需要用到的参数,这里就不去解释,主要是第一个
我本以为只要在getMoreData()里面将数据添加到arr_all就可以了,于是我直接用js的知识,对这个数组进行了填充
意思就是本来是arr_all[15条数据]
通过数组下标继续写入值arr_all[15条数据,下标+1,下标+2]
结果:
好消息,每次下拉都能加载更多的数据
坏消息,页面上并不会渲染出新查出来的数据
所以证明不只是写入数据那么简单
想要在页面上自动渲染出自己增加的东西,就得使用官方的方法setData进行重新赋值才会有效果
在这里,我就使用了concat来连接数组重新在setData赋值
(注:填充数据的方法不止一种,但是想要渲染在页面上目前我觉得必须用setData)
效果:
看到滚动条就知道数据成功的渲染在页面上了
coding的地址:https://git.coding.net/toBeMN/MINA-imitate-cnode-community.git
有什么不妥和改进的地方欢迎提出来,大家一起研究
补充说明:此方法为scrollview的加载方式,只需设置标签scrollview的bindscrolltoupper和bindscrolltolower属性即可
还有另外一种页面的加载方式,区别在于这是对于整个页面的加载,需要设置app.json文件:”enablePullDownRefresh”:”true”,并且固定上拉下拉加载的执行方法名为:onPullDownRefresh()和onReachBottom()