传参

这里带大家了解下 Mobilebone 中各个页面转场过程中参数是如何传递的。

Mobilebone 支持两种类型的页面显示,一种是请求外部数据并创建页面,一种是内置的页面元素的显示,每一种类型的页面显示方法都可以进行参数的传递。

请求传参

Mobilebone 中的页面数据请求均是GET请求,请求的参数可以直接写在 URL 地址上面,例如:

<a href="detail.html?id=1&type=0">加载</a>

其中的 id=1&type=0 就是请求的参数,也可以使用 data-formdata 属性进行参数设置,例如:

<a href="detail.html" data-formdata="id=1&type=0">加载</a>

补充:这里使用 data-params 可以有一样的效果,不过并不推荐使用,因为 data-params 主要用来传递请求相关的参数的,例如数据类型、超时时间、成功的回调等。

<a href="detail.html" data-params="id=1&type=0">加载</a>

页面内传参

页面内传参也是类似的,例如:

<a href="#myPage?id=1&type=0">前往</a>

也可以使用 data-formdata 属性进行参数设置,例如:

<a href="#myPage" data-formdata="id=1&type=0">加载</a>

补充:这里使用 data-params 可以有一样的效果。

获取

参数可以在 Mobilebone 的声明周期函数中获取,拿 callback 函数举例,例如:

Mobilebone.callback = function (pageInto, pageOut, options) {
    console.log(options.query);
};

其中,options 参数中的 query 属性就包含了所有的传参数据。例如:

<a href="#myPage?id=1&type=0">前往</a>
&lt;div id="myPage" class="page out"&gt;&lt;/div&gt;

则当 #myPage 这个页面元素进入的时候,就会在控制台输出这样的数据:

{
    id: "1",
    type: "0"
}

此时,开发者就可以基于 options.query 返回的参数内容进行对应的业务处理了。


发现错误?想参与编辑?在 GitHub 上编辑此页