Trust
Trust
  • 发布:2017-03-08 15:31
  • 更新:2019-05-30 17:08
  • 阅读:18796

【示例】mui.view插件的使用

分类:MUI

hello mui示例工程中setting.html页面,用到了mui提供的一个单页插件mui.view。
可能是该页面的内容较多,许多开发者对此插件的使用不是很明了。这里通过一个最简示例,来详细说明该插件的使用。

依赖

  • mui.js
  • mui.view.js
  • mui.css

以上文件,都可以在HBuilder中新建hellomui示例工程中获取。

html结构

主体部分

<div class="mui-view">  
    <div class="mui-navbar"></div>  
    <div class="mui-pages"></div>  
</div>  

.mui-view->.mui-navbar用于加载单页的header部分
.mui-view->.mui-mui-pages用于加载单页的content部分

单页结构

<div class="mui-page">  
    <!--header部分-->  
    <div class="mui-navbar-inner mui-bar mui-bar-nav">  
        <a href="javascript:;" class="mui-icon mui-icon-back mui-action-back"></a>  
    </div>  
    <!--内容区域-->  
    <div class="mui-page-content">内容区域</div>  
</div>  

每个单页的内容区域,都在.mui-page容器中。
header部分,必须按照.mui-page->.mui-navbar-inner的结构构建。内容区域,推荐使用.mui-page.content。

css部分

.mui-page.mui-transitioning {  
    -webkit-transition: -webkit-transform 300ms ease;  
    transition: transform 300ms ease;  
}  

.mui-page-left {  
    -webkit-transform: translate3d(0, 0, 0);  
    transform: translate3d(0, 0, 0);  
}  

.mui-ios .mui-page-left {  
    -webkit-transform: translate3d(-20%, 0, 0);  
    transform: translate3d(-20%, 0, 0);  
}  

.mui-navbar .mui-btn-nav {  
    -webkit-transition: none;  
    transition: none;  
    -webkit-transition-duration: .0s;  
    transition-duration: .0s;  
}  

.mui-navbar .mui-bar .mui-title {  
    display: inline-block;  
    width: auto;  
}  

.mui-page-shadow {  
    position: absolute;  
    right: 100%;  
    top: 0;  
    width: 16px;  
    height: 100%;  
    z-index: -1;  
    content: '';  
}  

.mui-page-shadow {  
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);  
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);  
}  

.mui-navbar-inner.mui-transitioning,  
.mui-navbar-inner .mui-transitioning {  
    -webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;  
    transition: opacity 300ms ease, transform 300ms ease;  
}  

.mui-page {  
    display: none;  
}  

.mui-pages .mui-page {  
    display: block;  
}  

上述css,均为实现单页切换所必须的。
与transition相关的css,用于实现单页的切换动画。可以根据实际需求,适当调整。

javascript部分

初始化插件

var viewApi = mui('.mui-view').view({  
    defaultPage: '#default_page' //默认页面的选择器  
});  

切换页面

两种方式可以实现页面切换
锚点方式

<!--锚点部分-->  
<a href="#pageid"></a>  
<!--单页部分-->  
<div class="mui-page" id="pageid"></div>  

js控制
如果希望通过js来控制,可以调用view组件的go()方法来实现。

var elem = document.querySelector('a');  
elem.addEventListener('tap', function(){  
    viewApi.go('#pageid');  
});  

切换事件

hello mui中setting.html中对此已经做了明确的说明。
监听页面切换事件方案,通过view元素监听所有页面切换事件
目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
第一个参数为事件名称,第二个参数为事件回调,其中e.detail.page为当前页面的html对象

后退操作

单页面的切换,后退的处理非常关键。view组件提供了两个方法,来处理back。

  1. viewApi.canBack() 用于判定是否可以后退
  2. viewApi.back() 后退至上一次访问的页面
    通常,会按照setting.html中那样,重写原来的back。
    var oldBack = mui.back;  
    mui.back = function() {  
    if(viewApi.canBack()) {  
        viewApi.back();  
    } else {  
        oldBack();  
    }  
    };  

结尾

附上一个简单的demo,解压后直接在浏览器中即可预览效果。

9 关注 分享
a***@163.com kika 1***@qq.com t***@qq.com 5***@qq.com 知行合一 n***@163.com m***@vip.qq.com s7team丶杰克

要回复文章请先登录注册

2***@qq.com

2***@qq.com

补充一下,这个demo动画和CSS很有问题。自带的那个setting标题部分很有问题。。。也不知道有没有人修补
2017-06-30 13:21
2***@qq.com

2***@qq.com

在setting模板文件中,在主页面的nav里加个别的icon,当切到子页面时,还是会显示。。。这是BUG吗?另外,这个DEMO的动画,弱爆了。。。
2017-06-30 13:05
8***@qq.com

8***@qq.com

我用vue v-for渲染列表,在a标签添加v-on:click="bianji(vo)"
使用锚点切换页面<a href="#pageid" v-on:click="bianji()"></a>
函数不会执行,怎么回事啊,
2017-05-24 16:21
1***@qq.com

1***@qq.com

感谢分享
2017-05-16 16:26
m***@gmail.com

m***@gmail.com

社区比官方文档有用系列。。。
2017-04-28 17:39
kika

kika

看源码找到了go方法,来论坛一搜,果然有wiki O(∩_∩)O哈哈~谢谢~
2017-04-07 15:32
a***@163.com

a***@163.com

感谢,翻api文档没找到,在这里找到了@!
2017-03-23 13:15
giddens

giddens

感谢分享
2017-03-08 15:32