美文网首页微信小程序
8-3 更多电影页面加载数据

8-3 更多电影页面加载数据

作者: 留白_汉服vs插画 | 来源:发表于2017-11-28 15:47 被阅读14次

    在more-movie页面中,首先是要根据不同的category加载页面。所以在more-movie.js中函数中,进行控制逻辑。也就是在onload函数中进行判断,具体怎么判断呢?使用一个switch函数。现在来查一下小程序switch用法:

    小程序里面,switch既是一个语句,又是一个组件。通过一个switch语句,选择加载不同的内容。

    另外看一下,dataUrl后面没有加 ?start = 0&count=10 之类的限制,因为我们要尽可能多的加载数据,这样就就可以下拉继续加载了。但是也并不是说,加载就没有限制,请求了全部数据。豆瓣api默认加载20条。

    就像之前的movies.wxml网页加载一样,通过一个函数获取网站中的数据。但是如果每一个网页加载数据都定义一下, 是非常低效的。所以可以在一个公共的js文件了,定义共用的函数,这样只要在本页面的js文件中导入该公共js文件,就可以直接引用该函数。

    先看一下什么是回调函数:

      我们先来看看回调的英文定义:A callback is a function that is passed as an argument to another function and is executed after its parent function has completed。

    字面上的理解,回调函数就是一个参数,将这个函数作为参数传到另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数。这个过程就叫做回调。

    其实也很好理解对吧,回调,回调,就是回头调用的意思。主函数的事先干完,回头再调用传进来的那个函数。但是以前看过很多博客,他们总是将回调函数解释的云里雾里,很高深的样子。

    现在基本理解回调函数的意思了吧。不理解的话没关系,我们用代码说话。

    先在公共方法集里面定义一个根据url获取资源的函数:

    并输出。注意这里有一个回调函数,回调函数是在more-movie.js中定义的。 

    在more-movie.js中导入公共方法。

    设置完了switch返回的网络地址url之后,执行导入的https这个函数:

    25行改成 util.http(dataUrl,callBack)

    这里执行回调函数的时候,我们先让回调函数输出得到的数据。

    这里的callBack函数,其实就是讲获取到的数据进行处理,跟movies.js中的一样。

    改写如下:

    如何查看有没有加载成功数据?

    在调试里面的dataset中。这一栏会显示加载的数据,比如:

    相关文章

      网友评论

        本文标题:8-3 更多电影页面加载数据

        本文链接:https://www.haomeiwen.com/subject/mrasbxtx.html