精华

微信小程序填坑之路之上拉加载

  • • 发表于 8年前
  • • 作者 toBeMN
  • • 11057 人浏览
  • • 30 条评论
  • • 最后编辑时间 8年前
  • • 来自 [技 术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

对于刷微博刷朋友圈的吃瓜群众,一定很了解这个功能吧,为防止流量走光光,只有当我滑到页面底部的时候才再次加载更多的数据,这里我写了一个低配版仿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()

详见:http://www.wxappclub.com/topic/493

分享到:
30条评论
Ctrl+Enter
作者

toBeMN

toBeMN

APP:3 帖子:24 回复:59 积分:3193

已加入社区[2940]天

梦想成为全栈的男人

作者详情》
Top