所以,jqmobile可以在切换页面中轻松的判断页面事件,使用如下代码,有兴趣可以看看:
- <body>
- <div data-role="page">
- <div data-role="header">
- <h1>欢迎来到我的主页</h1>
- </div>
- <div data-role="main" class="ui-content">
- <p>我现在是一个移动端开发者!!</p>
- </div>
- <div data-role="footer">
- <h1>底部文本</h1>
- </div>
- </div>
- </body>
$(document).on("pageinit",function(){ alert("pageinit 事件触发!") });</div>
其中“pageinit”只是其中一种事件罢了,还有pageshow,pagebeforeshow,pagecreate,pagehide,pagechange,pageload等等的方法来判断页面的事件,详见jquery mobile事件
但是不巧的是,我在mui的webview中并没有看到这样的方法判断事件(本身mui和jqmobile不同,jqmobile是spa单页调用,mui是真正的在页面中跳转的),所以当你在页面切换的时候不能根据页面变化来触发一些反复调用的js方法,因为每一次都在新的html中(重复调用的页面会在缓存中,这也是为什么返回后不会重新执行html文件下的js方法原因,真蛋疼)
关于spa和html原生跳转自行百度
比如:我现在编辑了个人资料,返回首页时候,由于mui.back并不会重新生成html(事实上我们也不希望重新生成的),那么js方法不会重新执行的,而我在index中有一个刷新用户信息的方法也不能用了
最初,我想我可以在返回前,保存用户资料的时候触发这个方法,可是你会发现这时因为将要返回到的页面的dom根本还不存在,你刷新个毛啊!(?∀? ?(?∀? ?(?∀? ?)
最后,查找mui,dcloud的官方文档,决定采用自定义事件fire()+webview()来解决,代码应该在编辑页面,当编辑保存后页面$.back()时候触发,mui.init()中有beforeback参数可以使用,在此之前先看看关于$.back()的官网解释:
mui框架将窗口关闭功能封装在mui.back
方法中,具体执行逻辑是:
- 若当前webview为预加载页面,则hide当前webview;
- 否则,close当前webview;
在mui框架中,有三种操作会触发页面关闭(执行mui.back方法):
- 点击包含
.mui-action-back
类的控件 - 在屏幕内,向右快速滑动
- Android手机按下back按键
代码如下:
- mui.init({
- swipeBack: true,
- beforeback: function