这个是入口,首页分header(分类,可滑动),footer,内容部分通过子页面加载
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/mui.css" />
</head>
<body>
<header>
<div id="slider" class="mui-slider mui-fullscreen">
<div id="abc" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll" id="splitH">
<a class="mui-control-item mui-active" data-index="0">
头条
</a>
<a class="mui-control-item" data-index="1">
娱乐
</a>
<a class="mui-control-item" data-index="2">
体育
</a>
<a class="mui-control-item" data-index="3">
财经
</a>
<a class="mui-control-item" data-index="4">
科技
</a>
<a class="mui-control-item" data-index="5">
军事
</a>
<a class="mui-control-item" data-index="6">
NBA
</a>
<a class="mui-control-item" data-index="7">
国际足球
</a>
<a class="mui-control-item" data-index="8">
中国篮球
</a>
</div>
</div>
</div>
</header>
<div class="mui-content" style="padding-bottom:50px;padding-top:50px;">
</div>
<footer>
<nav class="mui-bar mui-bar-tab">
<a href="main.html" index=0 class="mui-tab-item mui-active" data-index="0">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a href="m.html" index=1 class="mui-tab-item" data-index="1">
<span class="mui-icon mui-icon mui-icon-bars"></span>
<span class="mui-tab-label">新闻</span>
</a>
<a class="mui-tab-item" data-index="2">
<span class="mui-icon mui-icon mui-icon-videocam"></span>
<span class="mui-tab-label">视频</span>
</a>
<a href="login.html" class="mui-tab-item" data-index="3">
<span class="mui-icon mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">我</span>
</a>
</nav>
</footer>
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/d1.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
d1.js
mui.init({//初始化加载列表页,d2.html
subpages: [main.h.page('d2', {
top: '44px',
bottom: '50px'
})]
});
mui.plusReady(function() {
indexPage.init();
});
var indexPage = {
tabIndex:0,
init:function(){
var self = this;
mui("#splitH").on('tap', 'a', function() {//header分类点击事件
var index = this.getAttribute("data-index");
if(index==self.tabIndex) return;//重复点击,跳过
self.tabIndex = index;
var embed = plus.webview.getWebviewById('d2');
embed.evalJS("parentParams("+index+");");//调用子页面方法,加载相应列表
});
},
go:function(i){//子类左滑/右滑改变分类的颜色
mui('#abc').scroll().scrollTo(-50*i,0,100);//100毫秒滚动
mui('#splitH a')[this.tabIndex].classList.remove('mui-active');
mui('#splitH a')[i].classList.add('mui-active');
this.tabIndex = i;
}
};
d2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.css">
<style>
html,
body {
background-color: #efeff4;
}
.mui-pull-top-tips {
z-index: 999999;
position: absolute;
top: -20px;
left: 50%;
margin-left: -25px;
width: 40px;
height: 40px;
border-radius: 100%;
}
.mui-pull-top-wrapper {
width: 42px;
height: 42px;
display: block;
text-align: center;
background-color: #efeff4;
border: 1px solid #ddd;
border-radius: 25px;
background-clip: padding-box;
box-shadow: 0 4px 10px #bbb;
overflow: hidden;
}
.mui-pull-top-tips.mui-transitioning {
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
.mui-pull-top-tips .mui-pull-loading {
margin: 0;
}
.mui-pull-top-wrapper .mui-icon,
.mui-pull-top-wrapper .mui-spinner {
margin-top: 7px;
}
.mui-pull-bottom-tips {
text-align: center;
background-color: #efeff4;
font-size: 15px;
line-height: 40px;
color: #777;
}
.mui-pull-top-canvas {
overflow: hidden;
background-color: #fafafa;
border-radius: 40px;
box-shadow: 0 4px 10px #bbb;
width: 40px;
height: 40px;
margin: 0 auto;
}
.mui-pull-top-canvas canvas {
width: 40px;
}
.ud,
.ud p {
padding: 5px;
color: #000;
}
.ud a {
width: 33.3333%;
float: left;
}
.ud img {
width: 100%;
}
#uda {
margin: 0;
}
#pp div {
border: 0;
}
</style>
</head>
<body>
<div class="mui-content">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
</ul>
</div>
</div>
</div>
</body>
<script src="js/mui.js"></script>
<script src="js/mui.pullToRefresh.js"></script>
<script src="js/mui.pullToRefresh.material.js"></script>
<script>
mui.init();
mui.plusReady(function() {
detail.init();
});
var detail = {
tabIndex: 0,
count: 3,
pullObj: '',
mainPage: '',
titleName: ['头条', '娱乐', '体育', '财经', '科技', '军事', 'NBA', '国际足球','中国篮球'],
init: function() {
this.mainPage = plus.webview.getLaunchWebview();
this.setScroll();
this.pullDown();
this.initGallery();
},
setTabIndex: function(index) {
this.tabIndex = index;
},
setScroll: function() {
var self = this;
mui('.mui-scroll-wrapper').scroll({
bounce: false,
indicators: false, //是否显示滚动条
deceleration: 0.003 //滚动效果越大越灵敏
});
//循环初始化所有下拉刷新，上拉加载。
self.pullObj = mui('.mui-scroll').pullToRefresh({
down: {
callback: function() {
var _self = this;
setTimeout(function() {
var ul = _self.element.querySelector('.mui-table-view');
ul.innerHTML = "";
ul.appendChild(self.getData());
//ul.removeChild(ul.firstChild).insertBefore(self.getData(), ul.firstChild);
_self.endPullDownToRefresh();
}, 1000);
}
},
up: {
callback: function() {
var _self = this;
setTimeout(function() {
var ul = _self.element.querySelector('.mui-table-view');
ul.appendChild(self.getData());
_self.endPullUpToRefresh();
}, 1000);
}
}
});
},
pullDown: function() {
this.pullObj.pullDownLoading();
},
getData: function() {//获取数据
console.log('开始加载...');
var fragment = document.createDocumentFragment();
var li;
for(var i = 0; i < this.count; i++) {
li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = this.titleName[this.tabIndex] + '选项卡子项';
fragment.appendChild(li);
}
return fragment;
}
};
document.addEventListener("swipeleft", function() {
if(detail.tabIndex == detail.titleName.length - 1) return;
detail.tabIndex += 1;
detail.pullDown();
detail.mainPage.evalJS("indexPage.go(" + detail.tabIndex + ");");
console.log("你向左滑动了");
});
document.addEventListener("swiperight", function() {
if(detail.tabIndex == 0) return;
detail.tabIndex += -1;
detail.pullDown();
detail.mainPage.evalJS("indexPage.go(" + detail.tabIndex + ");");
console.log("你向右滑动了");
});
function parentParams(i) {//供父类调用
detail.setTabIndex(i);
detail.pullDown();
}
</script>
</html>
哪里有不足的地方希望大家指出
0 个评论
要回复文章请先登录或注册