<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>首页</title>
<link href="css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/mystyle.css" />
</head>
<body>
<div id="content">
<my-header v-bind:title="title_name" lefticon="mui-action-menu mui-icon-bars" righticon="mui-icon-search"></my-header>
<div class="mui-content" style="width: 40%;">
<ul class="mui-table-view menu" v-show="ishide">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" v-on:click="reload" data-name="">
首页
</a>
</li>
<li v-for="item in category" class="mui-table-view-cell">
<a class="mui-navigate-right" v-on:click="reload" :data-name="item.name" :data-catid="item.catid">
{{item.name}}
</a>
</li>
</ul>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/vue.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init({
swipeBack: false,
statusBarBackground: '#f7f7f7',
gestureConfig: {
doubletap: true
},
subpages: [{
id: 'list.html',
url: 'list.html',
createNew: false,
styles: {
top: '45px',
bottom: '8%',
bounce: 'vertical'
}
}],
preloadPages: [{
url: 'tags.html',
id: 'tags'
}]
});
var mv = new Vue({
el: '#content',
data: {
ishide: 0,
category: app.category,
title_name: app.name
},
methods: {
reload: function(event) {
var catid = event.target.dataset.catid;
var name = event.target.dataset.name;
this.title_name = name || app.name;
var list = plus.webview.getWebviewById('list.html');
mui.fire(list, 'reload', {
page: 1,
context: 'embed',
'filter[cat]': catid,
});
}
}
})
var menu = document.getElementById('lefticon');
function hasClass(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function removeClass(obj, cls) {
if(hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
}
window.addEventListener('menu:close', function(event) {
mv.ishide = 0;
removeClass(menu, 'trans')
if(!hasClass(menu, 'transback')) menu.className += " " + 'transback';
})
window.addEventListener('menu:open', function(event) {
mv.ishide = 1;
if(hasClass(menu, 'transback')) removeClass(menu, 'transback')
if(!hasClass(menu, 'trans')) menu.className += " " + 'trans';
})
window.addEventListener('title', function(event) {
console.log(JSON.stringify(event.detail))
mv.title_name = event.detail.title_name;
})
mui.plusReady(function() {
var list = plus.webview.getWebviewById('list.html')
document.getElementById('lefticon').addEventListener('tap', function() {
if(!list) {
list = plus.webview.getWebviewById('list.html')
}
mui.fire(list, 'menu')
})
})
document.getElementById('righticon').addEventListener('tap', function() {
mui.openWindow({
url: 'tags.html',
id: 'tags'
})
})
</script>
</body>
</html>
Comments | NOTHING