mui.view

最新推荐文章于 2021-06-30 22:08:49 发布

水色陀螺

最新推荐文章于 2021-06-30 22:08:49 发布

阅读量813

点赞数

CC 4.0 BY-SA版权

分类专栏： HBuilder

本文链接：https://blog.youkuaiyun.com/qq_33249119/article/details/51441994

HBuilder 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用MUI框架构建的单页应用实例，详细展示了页面结构和JavaScript初始化过程，包括初始化单页view、实现页面滚动及自定义后退行为等关键步骤。

<!--页面主结构开始-->
<div id="app" class="mui-views">
    <div class="mui-view">
        <div class="mui-navbar">
        </div>
        <div class="mui-pages">
        </div>
    </div>
</div>
<!--页面主结构结束-->

/////////////////////////////////////////////////////

<script src="../js/mui.view.js"></script>
<script>
mui.init();
//初始化单页view
var viewApi = mui('#app').view({
    defaultPage: '#test_c'
});
//初始化单页的区域滚动
mui('.mui-scroll-wrapper').scroll();

var view = viewApi.view;
(function($) {
    //处理view的后退与webview后退
    var oldBack = $.back;
    $.back = function() {
        if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
            viewApi.back();
        } else { //执行webview后退
            oldBack();
        }
    };
})(mui);
</script>