魅族 m1 metal
主要想实现底部点击窗口切换，官方提供的又不能记录滚动条
<body>
<nav id="defaultTab" class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="tab-webview-subpage-about.html" data-id='home'>
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="tab-webview-subpage-chat.html" data-id="chat">
<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
<span class="mui-tab-label">消息</span>
</a>
<a class="mui-tab-item" href="tab-webview-subpage-contact.html" data-id="contact">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">通讯录</span>
</a>
<a class="mui-tab-item" href="tab-webview-subpage-setting.html" data-id="setting">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function() {
var aniShow = {};
var self = plus.webview.currentWebview();
var current = '';
var styles = {
top: '45px',
bottom: '51px'
};
var tabsConfig = {
home: {
url: 'tab-webview-subpage-about.html',
styles: styles,
default: true
},
chat: {
url: 'tab-webview-subpage-chat.html',
styles: styles
},
contact: {
url: 'tab-webview-subpage-contact.html',
styles: styles
},
setting: {
url: 'tab-webview-subpage-setting.html',
styles: styles
}
};
var tabs = {};
for (id in tabsConfig) {
tabs[id] = plus.webview.create(tabsConfig[id].url, id, tabsConfig[id].styles);
if (tabsConfig[id]['default']) {
self.append(tabs[id]);
var temp = {};
temp[id] = "true";
current = id;
mui.extend(aniShow,temp);
}
}
mui('#defaultTab').on('tap', 'a', function(e) {
if (current == this.dataset.id) {
mui.fire(tabs[current], 'scroll2top');
return;
}
tabs[current].hide();
if(aniShow[this.dataset.id]){
tabs[this.dataset.id].show();
}else{
//否则，使用fade-in动画，且保存变量
var temp = {};
temp[this.dataset.id] = "true";
mui.extend(aniShow,temp);
tabs[this.dataset.id].show('fade-in',200);
}
current = this.dataset.id;
});
});
var first = null;
mui.back = function() {
//首次按键，提示‘再按一次退出应用’
if (!first) {
first = new Date().getTime();
mui.toast('再按一次退出应用');
setTimeout(function() {
first = null;
}, 1000);
} else {
if (new Date().getTime() - first < 1000) {
plus.runtime.quit();
}
}
};
</script>
</body>
