实现每滚动一次,加载20条。
查找api文档,这个文档是用来查的,不是用来学习的。 看到某一个,了解相关东西就可以啦。
view组件是不能实现上划加载更多操作的。需要用scroll-view
看一下api中,有相关属性scroll-x 能不能横向滚动。scroll-y 能不能纵向滚动,这里设置为true。
滚动到底的时候,触发事件bindscrolltolower事件
思考一下,这个scrollView放在哪里?在哪里定义事件?
这个scrollView在文件movie-grid-template中调用:
定义在调用方定义,也就是more-movie.js中定义onScrollLower事件,因为more-movie调用了movie-grid-template。
使用竖向滚动时,需要给一个固定高度,通过 WXSS 设置 height。不然事件不会触发,这个很重要啊。
不管事下拉刷新,还是下滑加载更多,数据的地址url是没有变的,第一次加载top250,上划,依然是这个的数据,变的是序号,0-19,20-39 。。。。
变的是start开始的地方,count是加载的数量。
定义下滑事件:首先把onload中的加载的地址dataUrl放在全局变量当中。这样就可以在下拉加载中,获取到这个全局的地址。
下滑事件中,nextUrl为下一次加载的地址,然后这个地址为当前的地址,加上开始位置(当前的计数,这个计数视频放在处理数据事件上,因为每加载一次,得到的数据需要处理一次,这时候可以统计总共目前加载了多少数据totalCount,然后下次从这个位置开始加载就好了。但我个人觉得,放在onScrollLower事件中更好理解,因为这样每次下拉,从新开始的位置就会加20)。最后调用一下从新加载新数据的函数http。
一运行,有问题,因为可以添加新的数据,但是旧的数据消失了。比如也米娜0-19条数据,加载新的,就只有20-39了。0-19消失了。可我们想要的是0-39。
在jquery的解决方案中,想到的就是获取dom,每次添加dom节点。越加越多。但是小程序是没有dom的,而是数据绑定的。所以总体的思路应该是,第一次20条,下拉之后40条,那么数据再做一次数据绑定。更新前面数据。
在data中
如上:在data中新设置一个isEmpty,判断是不是第一次加载。
如下:设置一个totalMovies为空,判断isEmpty是不是空,如果非空,说明有已经有数据了。把旧的数据和新的数据concat起来,如果是空,那么第一次加载,totalMovies就是获得的movies,并把isEmpty赋值为空。最后把总的数据,通过setData,绑定起来。
网友评论