首页 实用子页面 实现 底部选项卡切换 内容页有一个页面 需要用到选项卡+上拉加载的功能 ，但是在ios端，上下滑动是 会不定时出现 整个子内容页面一起滑动的效果。。
首页
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-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 href="css/mui.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="mui-bar mui-bar-nav">
<a class="mui-icon iconfont icon-search mui-pull-right" data-search="0"></a>
<h1 class="mui-title" id="title">demo</h1>
<div class="search-box">
<input type="text" name="header-search" id="header-search" placeholder="search key value" />
</div>
</div>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="component/indexContent.html" id="defaultTab">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="component/chinaShow.html">
<span class="mui-icon iconfont icon-china"></span>
<span class="mui-tab-label">a</span>
</a>
<a class="mui-tab-item" href="component/funding.html">
<span class="mui-icon iconfont icon-crowd-fund-second"></span>
<span class="mui-tab-label">b</span>
</a>
<a class="mui-tab-item" href="component/user.html">
<span class="mui-icon iconfont icon-user"></span>
<span class="mui-tab-label">c</span>
</a>
</nav>
<script src="js/mui.min.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript">
mui.init({
swipeBack: false,
statusBarBackground: '#fff'
});
var subpages = ['component/indexContent.html'];
var subpage_style = {
top: '60px',
bottom: '50px',
bounce: 'vertical'
};
var aniShow = {};
//创建子页面，首个选项卡页面显示，其它均隐藏；
mui.plusReady(function() {
main = plus.webview.currentWebview();//获取当前窗口的WebviewObject对象
for (var i = 0; i < 4; i++) {
var temp = {};
var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
if (i > 0) {
sub.hide();
}else{
temp[subpages[i]] = "true";
mui.extend(aniShow,temp);
}
main.append(sub);
}
});
//当前激活选项
var activeTab = subpages[0];
var title = document.getElementById("title");
//选项卡点击事件
mui('.mui-bar-tab').on('tap', '.mui-tab-item', function(e) {
var targetTab = this.getAttribute('href');
if (targetTab == activeTab) {
return;
}
//更换标题
title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
//显示目标选项卡
//若为iOS平台或非首次显示，则直接显示
if(mui.os.ios||aniShow[targetTab]){
plus.webview.show(targetTab);
}else{
//否则，使用fade-in动画，且保存变量
var temp = {};
temp[targetTab] = "true";
mui.extend(aniShow,temp);
plus.webview.show(targetTab,"fade-in",300);
}
//隐藏当前;
plus.webview.hide(activeTab);
//更改当前活跃的选项卡
activeTab = targetTab;
});
//自定义事件，模拟点击“首页选项卡”
document.addEventListener('gohome', function() {
var defaultTab = document.getElementById("defaultTab");
//模拟首页点击
mui.trigger(defaultTab, 'tap');
//切换选项卡高亮
var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
if (defaultTab !== current) {
current.classList.remove('mui-active');
defaultTab.classList.add('mui-active');
}
});
mui.ready(function(){
var search_btn = document.getElementsByClassName("icon-search")[0],
search_box = document.getElementsByClassName("search-box")[0],
title = document.getElementsByClassName("mui-title")[0];
search_btn.addEventListener('tap',function () {
if(search_btn.dataset.search=="1"){//为1 隐藏search输入框
hideSearch();
}else{
showSearch();
}
});
function showSearch(){
search_box.style.WebkitAnimation = "showSearch 500ms forwards";
search_box.style.animation = "showSearch 500ms forwards";
title.style.display = "none";
search_btn.style.marginRight = "0";
search_btn.dataset.search = "1";
}
function hideSearch(){
search_box.style.WebkitAnimation = "hideSearch 500ms forwards";
search_box.style.animation = "hideSearch 500ms forwards";
title.style.display = "block";
search_btn.style.marginRight = "-10px";
search_btn.dataset.search = "0";
}
});
</script>
</body>
</html>内容页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内容页</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-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 href="../css/mui.min.css" rel="stylesheet" />
<link href="../css/style.css" rel="stylesheet" />
<style type="text/css">
.mui-slider .mui-slider-group .mui-slider-item>a:not(.mui-control-item) {
display: inline;
}
.mui-table-view-cell {
padding: 0;
}
.mui-table-view-cell:after {
position: absolute;
right: 10px;
left: 10px;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #eee;
}
.mui-table-view-cell>a:not(.mui-btn) {
margin: 0;
padding: 10px;
white-space: normal;
}
.mui-table-view-cell .view-cell-title{
padding-top: 10px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
color: #333;
}
.mui-table-view-cell .view-cell-info{
padding-top: 10px;
font-size: 12px;
}
.mui-segmented-control.mui-scroll-wrapper {
height: 45px;
}
.mui-segmented-control.mui-scroll-wrapper .mui-scroll {
width: 100%;
height: 45px;
background: #fff;
}
.mui-segmented-control.mui-scroll-wrapper .mui-scroll>a{
line-height: 40px;
padding: 0 5px;
margin: 0 15px;
border-bottom: 2px solid transparent;
color: #666;
font-size: 16px;
}
.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
color: #000;
border-bottom: 2px solid #F2C051;
}
.mui-fullscreen .mui-segmented-control~.mui-slider-group {
top: 45px;
}
.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item {
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
}
.list-style2 .self-card-header>div img{
padding: 0 3px;
}
.list-style2 .self-card-header>div:first-child img{
padding-right: 6px;
padding-left: 0;
}
.list-style2 .self-card-header>div:last-child img{
padding-left: 6px;
padding-right: 0;
}
.list-style3 .self-card-inner>div:last-child img{
padding-left: 6px;
padding-right: 0;
}
.list-style3 .self-card-inner .view-cell-title{
padding-top: 0;
}
</style>
</head>
<body>
<div class="mui-content" id="indexContent">
<div id="slider" class="mui-slider mui-fullscreen">
<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll">
<a class="mui-control-item mui-active" href="#item1mobile">
热门
</a>
<a class="mui-control-item" href="#item2mobile">
新闻
</a>
<a class="mui-control-item" href="#item3mobile">
文化
</a>
</div>
</div>
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell list-style1">
<a href="#">
<div class="self-card">
<div class="self-card-header">
<img src="../images/index/index_01.png" alt="1" />
</div>
<div class="self-card-inner">
<p class="view-cell-title">The world martial arts out of shaolin, the shaolin martial arts come from?</p>
<p class="view-cell-info">候鸟杂记 · 2017-03-07</p>
</div>
</div>
</a>
</li>
<li class="mui-table-view-cell list-style2">
<a href="#">
<div class="self-card">
<div class="self-card-header mui-row">
<div class="mui-col-xs-4">
<img src="../images/index/index_02.png" alt="2" />
</div>
<div class="mui-col-xs-4">
<img src="../images/index/index_03.png" alt="3" />
</div>
<div class="mui-col-xs-4">
<img src="../images/index/index_04.png" alt="4" />
</div>
</div>
<div class="self-card-inner">
<p class="view-cell-title">"Lei feng's cap" became a foreigner in Beijing this year's winter new trend</p>
<p class="view-cell-info">china daily | 2017年2月7日</p>
</div>
</div>
</a>
</li>
<li class="mui-table-view-cell list-style3">
<a href="#">
<div class="self-card">
<div class="self-card-inner mui-row">
<div class="mui-col-xs-8">
<p class="view-cell-title">"Lei feng's cap" became a foreigner in Beijing this year's winter new trend</p>
<p class="view-cell-info">china daily | 2017年2月7日</p>
</div>
<div class="mui-col-xs-4">
<img src="../images/index/index_05.png" alt="4" />
</div>
</div>
</div>
</a>
</li>
<li class="mui-table-view-cell list-style4">
<a href="#">
<div class="self-card">
<div class="self-card-inner mui-row">
<p class="view-cell-title">"Lei feng's cap" became a foreigner in Beijing this year's winter new trend</p>
<p class="view-cell-info">china daily | 2017年2月7日</p>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第2个选项卡
</li>
</ul>
</div>
</div>
</div>
<div id="item3mobile" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第3个选项卡
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.pullToRefresh.js"></script>
<script src="../js/mui.pullToRefresh.material.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript">
mui.init({
swipeBack: false //启用右滑关闭功能
});
window.onload = function() {
//阻尼系数
var deceleration = mui.os.ios ? 0.003 : 0.0009;
mui('.mui-scroll-wrapper').scroll({
bounce: false,
indicators: true, //是否显示滚动条
deceleration: deceleration
});
mui.ready(function() {
//循环初始化所有下拉刷新，上拉加载。
mui.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
mui(pullRefreshEl).pullToRefresh({
up: {
callback: function() {
var self = this;
setTimeout(function() {
var ul = self.element.querySelector('.mui-table-view');
ul.appendChild(createFragment(ul, index, 5));
self.endPullUpToRefresh();
}, 1000);
}
}
});
});
var createFragment = function(ul, index, count, reverse) {
var length = ul.querySelectorAll('li').length;
var fragment = document.createDocumentFragment();
var li,html;
html = '<a href="#">'+
'<div class="self-card">'+
'<div class="self-card-header mui-row">'+
'<div class="mui-col-xs-4">'+
'<img src="../images/index/index_05.png" alt="4" />'+
'</div>'+
'<div class="mui-col-xs-4">'+
'<img src="../images/index/index_06.png" alt="4" />'+
'</div>'+
'<div class="mui-col-xs-4">'+
'<img src="../images/index/index_07.jpg" alt="4" />'+
'</div>'+
'</div>'+
'<div class="self-card-inner">'+
'<p class="view-cell-title">"雷锋帽"成了老外今年在北京过冬的全新潮流</p>'+
'<p class="view-cell-info">china daily | 2017年2月7日</p>'+
'</div>'+
'</div>'+
'</a>';
for (var i = 0; i < count; i++) {
li = document.createElement('li');
li.className = 'mui-table-view-cell list-style2';
li.innerHTML = html;
fragment.appendChild(li);
}
return fragment;
};
});
};
</script>
</body>
</html>
0 个回复