zhangxinxu / mobilebone Goto Github PK

初始化时如何自定义进入的页面？

我现在是用animationend()+if(into_or_out === 'out')来进行页面转出判断的。

这两个函数，分别用在页面进入时的事件挂载，和转出后的内存回收。

您的test里的例子里有一个固定header和footer的页面，但是，也有一种情况是：当某单独页面需要一个固定的footer2或者固定的header2的时候就不太好用了。

我在某个页面里使用了position：fixed;，但是当进入这个页面以后，这个固定定位的元素就失效了。

复现的方法是这样的：

在你的项目下找到test/fixed-header-footer/index.html，将这个文件的第27行，也就是< div id="page1" class="page out" data-title="页面1" >< div class="content" >页面1内容...< /div >< /div >修改为下面的代码：

< div id="page1" class="page out" data-title="页面1">
< div class="content">
< p>页面1内容...

然后在head标签的style里面加上下面的样式：

.footer2{
position: fixed;
bottom:50px;
left:0;
}

然后，切换到page1的时候你就能看到啦。

图片自适应加入iscroll，拉动高度会失效

“test的示例”中的 “backbone组合示例”有BUG。
git/mobilebone/test/backbone/index.html 文件中，36～38行：
var render = function(page_in, page_out, json) {
if(typeof json != "object") return;
var key = json.key, pageid = json.key + "Page";

render函数的参数json，json.key是undefined，json.response.key才是对的。

PS：是否是升级data-onpagefirstinto函数调用导致？

http://w.wmfl.cn/index.php/Home/Mall/index/sid/1.html?debug=zhangrui.songyi
这个例子，是ajax请求，我设置了data-rel="auto"为什么过场方向还都是向左呀，不会自动识别？

咨询下 Mobilebone.ajax 的使用方法，谢谢！

HTC8X wp8.1 </>不能返回至前一page,而是直接返回到我之前访问的网站，按手机返回键也是。

建议在ajax请求时像jQuery一样，添加一个请求头信息，以便服务器端能够判断是否为ajax请求。

xmlhttp.setRequestHeader("X-Requested-With","XMLHttpRequest");

😄

就是昨天报的那个问题，返回按钮失效的问题，你解释说是因为返回到没有id的page造成的，并修复了这个问题。

于是，我今天就又一次试验了，真的！好了！

但是，当我刷新了下页面以后，后退按钮就又失效了。无论是浏览器的后退按钮还是页面里的rel="back",都不能正常返回。不过点击后退的话，url还是会变化的。

在安卓webview里，我发现用返回上一page有时会出现点击无反应的现象（这时返回键也是无反应的。另外，刚刚在小米4上发现，偶然会出现点击两次才能返回的现象，出现这种情况后，返回上一页再进入再返回还是点击两次才能返回，连续的）。不知道是mobilebone的问题还是fastclick.js的问题。
我的Mobilebone不是最新的，我更新一下试试再回来反馈。

比如，有这样一个页面地址为“http://www.xxx.com/order/firm?redirect_url=aHR0cDovL3d3dy5qaW5yaXRlbWFpLmNvbS9wcm9kdWN0L2RldGFpbD9waWQ9MTQwMDEzMTAzMDgzODM=&buy_now=1”

这个url里面既包含？又有=和&，不知道是不是这个原因，就算是最基本的转场到了新的page页以后，这个新的page页的后退按钮也会失效。无论是浏览器自带的后退按钮还是mobilebone自带的data-rel="back"，都不能正常后退，必须是点击了后退按钮以后再刷新页面才能显示前一个页面。

不知道是不是我猜测的这个url导致的无法正常后退。假如是的话，那么需要转场的页面url就是有一定限制了？那么是什么限制呢？

张老师，您好。首先感谢您的mobilebone ！非常给力！
我想问问，如果我要做离线应用，离线点a标签data-rel是不生效的，那我应该怎样改变滑动方向呢？我是前端小白如果问题太没水平不要见怪。

好像我之前提过这个问题，当某个page需要一个固定在底部的元素的时候，由于用fixed失效，所以我使用absolute属性，但是某些时候会莫名其妙的不起作用。特别是在ios下，我发现有时候z-index会失效，我google了一下，说有可能是和transform属性有关，不过由于解释的过于复杂，我都看不懂，涉及层级之类的（stacking context）。

此处我说的底部是指只有这个page需要的一个底部，如果切换到别的page以后，别的page不能有这个底部的存在，我想不仅局限于一个固定在底部的元素，假如有需要置顶的元素或者别的固定定位的元素的话，应该都会出现这中问题。

不知道有哪位仁兄有比较好的解决办法没有。

就是这个http://iancj.github.io/qq/已经打不开了。

最近在做一个单页的WebApp，使用seajs+zepto+mobilebone+iscroll这种搭配来开发，但是遇到一个比较坑爹的问题，就是使用zepto的touch模块时，会出现触发两次的问题，点击a标签也一样，会触发两次。

我在一个.page里加了一个div，无论设置高度为多少，也是没办法滚动的。可你的博客原文中有这么一段话：“.page对应的元素就是我们的每一个页面，我们可以在此div中尽情书写我们的设计布局。一般而言，要在page元素内部再嵌套一个content元素，主要为了实现滚动。如果使用iScroll滚动, 无需定高；如果原生滚动，content元素需要有特定高度值。”

我没有使用iScroll，就按照你说的那样在.page里加了一个content的div，在这个div里设置了高度，却没办法滚动哇。

我是不是哪里搞错了？

小白求指教
我想做离线应用，通过webview访问静态页面（而且页面较多不适合做单页面），但很不能ajax加载的话，会出现一些问题，例如，data-rel在不是单页面的情况下，就不无法生效了。请问应该怎么办呢？

进入 被请求的HTML 页面后点击 “返回” 按钮后title没有变化

对了，还有个小问题， 如果hash中包含多个#id的话会报错，如：

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': '#&ajax-page.html?a####&a=1' is not a valid selector. mobilebone.js:848

就上面那个demo，点着点着就报这个错了。。。我不是有意的。。。

有些特殊的需求是ajax请求了一个html页面，如果仅仅是作为显示和简单处理那么没有问题，但目前有个应用场景中需要执行ajax请求的这个html中的javascript，目前通过data-success来实现了，请问有更好的方式吗？

异步添加的新闻列表、产品列表链接 想让它正常跳转

非常好用，码神！不过遇到个问题：
除了Mobilebone.callback = function() {};
在页面跳转的时候可以触发load 事件，还有没有其他的方式？
因为我有很多js 是在jquery的$(document).ready(function(){}) 中执行的

有几个问题，想了解下：

1. 内容全部堆在一个页面内，首屏还好么？首屏只加载结构，其他内容 AJAX，那么内存扛得住？页数达到一定程度，remove DOM，use localstorage。
2. 路由切换是咋做的？就是 store 这个变量中查询和储存么？

你觉得这东西做起来难点和痛点是啥？

还是在 issues 中提出来比较好。

请问有没有返回页面回到页面顶部的API？如果之前打开的页面是向下滚动了，那再返回，它还是停留在之前滑到的地方，这样很多时候交互都不太友好。

最近在做一个单页的WebApp，使用seajs+zepto+mobilebone+iscroll这种搭配来开发，但是遇到一个比较坑爹的问题，就是使用zepto的touch模块时，会出现触发两次的问题，点击a标签也一样，会触发两次。

http://w.wmfl.cn/index.php/Home/Mall/index/sid/1#&page-home
这个例子，下方的导航切换时方向一直向左的，设置了data-rel="auto"，怎么回事？

如题：:）
mobilebone默认不给page在移动端上添加手滑事件的吗？

https://rawgit.com/zhangxinxu/mobilebone/develop/docs/index.html#&indexPage
挺漂亮的,呵呵

/**
 * auto init
**/
window.addEventListener("DOMContentLoaded", function() {
    if (Mobilebone.autoInit == true) {
        Mobilebone.init();
    }
});

请问这里兼容了其他浏览器了吗？如果没有怎么兼容其他？

案例里complex
点底部切换在iphone 6plus safari 和 微信里
切换的slide效果在来回点的 时候会失效
其他手机没有试过
在chrome 的模拟环境里没有出现
ps：博客里放了几天没回复 这里试试

 formData = new FormData(trigger_or_options);

trigger_or_options 这个应该是个 json对象，FormData的参数是 FormElement。 求教

请问如果我想给已加载的页面上的每一个按钮添加事件监听，使其被点击后通过dom获取被点击的按钮的数据，然后将数据转传到要进场的page , 应该怎样做比较妥呢？ 小白求指导！

可以加一个上拉刷新，下拉刷新的功能

http://w.wmfl.cn/index.php/Home/Mall/index/sid/251.html?debug=zhangrui.songyi#&/index.php/Home/Mall/index/sid/251
这个页面用ajax请求的html，链接为什么无法点击呢，帮忙看下，谢谢

我在小米1s手机上自带的浏览器访问微信综合实例，显示一片空白，UC和FireFox可以正常显示，包括那个QQ实例也是一样。

觉得可以变得更强大一些，任何标签都可以。个人建议。

测试代码如下：

<div class="header">
    <a href="#pageHome" data-rel="auto">首页</a>
    <a href="inner.html" data-rel="auto" data-container="container">页面2</a>
    <a href="inner2.html" data-rel="auto" data-container="container">页面3</a>
</div>
<div id="pageHome" class="page in">
    <div class="content">
        <p>首页内容</p>
    </div>
</div>

首页那屏是一次加载，其他是ajax加载。这个时候data-rel="auto"自动滑入的左右顺序会乱掉。（首页和页面2之间的切换）

我有个类似固定头尾的页面，但这个页面是从别的页面通过mobilebone跳过来的，这种怎么实现动画？

其实就是普通的ajax请求，假如有这么一个页面地址栏里的地址是：www.xxx.com/order/firm
这个页面里有个a连接：< a href="ajax.html" >，点击这个连接以后，按照正常的情况，页面会切换到ajax.html这个page去，并且当前连接就会变化为：www.xxx.com/order/firm?#&ajax.html

但是：有时候某些情况下，地址url没有变化啊！依然是www.xxx.com/order/firm，

然后你就刷新一下，这时候地址url才会变成www.xxx.com/order/firm?#&ajax.html

这是什么情况？

这个问题，我很难从你test里面的demo里复现出来，我就说下我实际项目里的问题吧。

我当前是一个电商页面的订单提交页面，里面有个添加地址的a连接，此时订单提交页的ur是：http://www.xxx.com/order/firm?redirect_url=aHR0cDovL3d3dy5qaW5yaXRlbWFpLmNvbS9wcm9kdWN0L2RldGFpbD9waWQ9MTQwMTEyNTI5NDIzODM=&buy_now=1

添加地址的连接地址是：http://www.xxx.com/address/index

如果我从pc浏览器里点击添加地址的连接的话，就会切换到另外一个page，并且地址栏里的url就会变成下面这样的：http://www.xxx.com/order/firm?redirect_url=aHR0cDovL3d3dy5qaW5yaXRlbWFpLmNvbS9wcm9kdWN0L2RldGFpbD9waWQ9MTQwMTEyNTI5NDIzODM=&buy_now=1#&http://www.xxx.com/address/index

这一切都很正常，但是一旦到了手机里去这么操作，也就是点击了地址添加页的连接以后，页面有个切换，内容也换到了地址添加的内容，而去看地址栏里的url却没有变化，除非你刷新页面才能看到变化。

其实地址栏没有变化也没啥大不了的，可问题是，刷新页面以后我绑定的事件就会失效。我猜这和地址栏里的url变化有关。这个页面我只绑定了一次onfirstpageinto事件，如果地址栏都一切正常，那么刷新页面事件绑定都是没有问题的。一旦地址栏发生变化，事件绑定就失效了。

条件如下：
打开页面a（a.html)，里面包含一个连接：href 里面是b.html。

点击这个的链接以后，就会以ajax的方式在a中打开b，这个时候如果刷新页面的话，显示的依然是b页面，a依然是被隐藏的状态。

b.html中也包含一个链接：href里面是c.html。

然后点击这个c链接以后，就会以ajax的方式加载c页面的内容了。这时候a和b都被隐藏了。这个时候，假如你再刷新页面的话，糟糕，页面变成空白了，查看页面dom，发现ajax加载的b和c都不见了，而a本身也依然是被隐藏的，导致页面是一个空白的。

如果刷新页面，依然显示c就好了。

不知道我描述的是否清楚。

这个BUG手机上应该不会出现，PC浏览器上重现方法：缩小浏览器，鼠标左键点击页面中的任何一处地方 不放手，移动鼠标移出浏览器再放手，就报错：Uncaught TypeError: Cannot read property 'tagName' of null。不过影响不大，因为这个BUG应该只会出现在PC浏览器上。

现在的过场方向，如果是ajax请求，且没有缓存，方向都是从右进入。
能不能给每个page手动加上索引，根据设置的索引的顺序来决定过场的方向？

是否存在一个方法可以简单的判断当前页面是哪一个页面，比如用page的id或链接？

本来，点击一个a链接，mobilebone会自动将a链接的href的转换成一个ajax的请求，并且至少会在这个ajax的请求url中加入一个类似“?r=88787878”的参数（这个参数不是我加上的，我通过查看网络请求抓取到的，我猜应该是mobilebone自动加的参数吧）。但是，某些时候，当点击这个a链接的时候，并没有走ajax请求，而是页面直接跳转到href那个页面了（也就是a链接默认的那种动作）。

您文章中写道：“例如，我们请求ajax.html页面，该页面最好是完整的body > page结构。因为，就算页面JS挂掉，无法阻止默认链接行为，发生跳转，也不会影响可用性。但是，如果请求的是个动态页面，直接返回的是干净的HTML代码，如果没有page元素，则不能含有html以及body标签。”

我请求的是干净的动态页面，里面没有多余的html代码，连样式都没有，我查看了网络请求，js并没有挂掉，所以当“无法阻止默认链接行为”的时候，那个页面是完全不可用的。

现在还不太清楚到底那个环节出了问题。

我能发现的问题只是正常情况下请求的ajax地址是：“http://www.xxx.com/address/index?r=1422592433154"，这是没问题的。

出现问题时，网络触发的请求地址是：”http://www.xxx.com/address/index“。

总之是失效了。

按照你文章中的建议：“我认为更好的实现方法应该是这样的。页面骨架，也就是page主体，也就是一个空div默认就载入，然后所有的切换都是基本切换，而不是Ajax切换。在切换即将开始的时候（回调），您就可以使用自己，例如Zepto的Ajax方法去请求你需要的JSON数据，做你任何想做的事情，完全没有Mobilebone的限制。”

这样的话，ajax过来的内容的事件，大部分都要绑定事件委托才好，比如都将事件绑定到document上。ios有个bug，有时候document不能绑定事件委托事件，在body上也不行。而且，据说document上的事件委托在性能方面也存在问题。

那么ajax新内容和绑定事件的先后问题最好的解决方案是什么？

try it with jsbin, jsfiddle , and here is gbdebug url:

http://www.gbtags.com/gb/debug/952dac90-ba44-473c-9ac4-4a7b9c89d3ab.htm

it looks home page cannot be displayed correctly.when loading the page. Any ideas?