Skip to content

M
mui
Commit 4ffe4e52 authored by hbcui1984's avatar hbcui1984
Browse files
Options

解决webview模式选项卡第二个子项在iOS平台显示有遮罩的问题

parent 4aaecf41
Hide whitespace changes
Inline Side-by-side
Showing with 100 additions and 74 deletions
examples/hello-mui/examples/tab-webview-subpage-chat.html
View file @ 4ffe4e52
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -10,100 +11,125 @@ ...@@ -10,100 +11,125 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html,body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
.title{ .title {
margin: 20px 15px 10px; padding: 20px 15px 10px;
color: #6d6d72; color: #6d6d72;
font-size: 15px; font-size: 15px;
background-color: #fff;
} }
</style> </style>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<div class="mui-content"> <div class="mui-content">
<div class="title">
这是webview模式选项卡中的第2个子页面，该页面展示一个支持下拉刷新、上拉加载的消息列表
</div>
<div id="pullrefresh" class="mui-scroll-wrapper"> <div id="pullrefresh" class="mui-scroll-wrapper">
<div class="mui-scroll"> <div class="mui-scroll">
<div class="title">
这是webview模式选项卡中的第2个子页面，该页面展示一个支持下拉刷新、上拉加载的消息列表
</div>
<ul class="mui-table-view mui-table-view-chevron"> <ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 1</a></li> <li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 1</a>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 2</a></li> </li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 3</a></li> <li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 2</a>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 4</a></li> </li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 5</a></li> <li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 3</a>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 6</a></li> </li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 7</a></li> <li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 4</a>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 8</a></li> </li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 9</a></li> <li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 5</a>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 10</a></li> </li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 11</a></li> <li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 6</a>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 12</a></li> </li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 13</a></li> <li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 7</a>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 14</a></li> </li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 15</a></li> <li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 8</a>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 16</a></li> </li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 17</a></li> <li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 9</a>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 18</a></li> </li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 19</a></li> <li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 10</a>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 20</a></li> </li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 11</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 12</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 13</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 14</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 15</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 16</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 17</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 18</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 19</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 20</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
<script> <script>
mui.init({ mui.init({
swipeBack: false, swipeBack: false,
pullRefresh: { pullRefresh: {
container: '#pullrefresh', container: '#pullrefresh',
down: { down: {
callback: pulldownRefresh callback: pulldownRefresh
}, },
up: { up: {
contentrefresh: '正在加载...', contentrefresh: '正在加载...',
callback: pullupRefresh callback: pullupRefresh
}
} }
});
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.firstChild);
}
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 1000);
} }
}); var count = 0;
/** /**
* 下拉刷新具体业务实现 * 上拉加载具体业务实现
*/ */
function pulldownRefresh() { function pullupRefresh() {
setTimeout(function() { setTimeout(function() {
var table = document.body.querySelector('.mui-table-view'); mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
var cells = document.body.querySelectorAll('.mui-table-view-cell'); var table = document.body.querySelector('.mui-table-view');
for (var i = cells.length, len = i + 3; i < len; i++) { var cells = document.body.querySelectorAll('.mui-table-view-cell');
var li = document.createElement('li'); for (var i = cells.length, len = i + 20; i < len; i++) {
li.className = 'mui-table-view-cell'; var li = document.createElement('li');
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>'; li.className = 'mui-table-view-cell';
//下拉刷新，新纪录插到最前面； li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
table.insertBefore(li, table.firstChild); table.appendChild(li);
} }
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed }, 1000);
}, 1000); }
} </script>
var count = 0;
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 20; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
table.appendChild(li);
}
}, 1000);
}
</script>
</div> </div>
</body> </body>
</html> </html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment