HBuilder开发IOS-Android-APP

最新推荐文章于 2023-09-06 09:50:52 发布

大熊程序猿

最新推荐文章于 2023-09-06 09:50:52 发布

阅读量749

点赞数 1

文章标签： APP IOS Android HTML5

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/xiaoxionglove/article/details/77914393

版权

下载并安装： HBuilder

官网： http://www.dcloud.io/

创建项目：ohyewang

index.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.min.css">
<style>
html,
body {
background-color: #efeff4;
}
p {
text-indent: 22px;
}
span.mui-icon {
font-size: 14px;
color: #007aff;
margin-left: -15px;
padding-right: 10px;
}
.mui-off-canvas-left {
color: #fff;
}
.title {
margin: 35px 15px 10px;
}
.title+.content {
margin: 10px 15px 35px;
color: #bbb;
text-indent: 1em;
font-size: 14px;
line-height: 24px;
}
input {
color: #000;
}
</style>
</head>
<body>
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
<aside id="offCanvasSide" class="mui-off-canvas-left">
<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="title">查询分类</div>
<div class="content">
</div>
</div>
</div>
</aside>
<div class="mui-scroll-wrapper">
<header class="mui-bar mui-bar-nav">
<a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
<h1 class="mui-title">噢耶网—生活小贴士</h1>
</header>
<body>
<div id="pullrefresh" class="mui-scroll">
<ul class="mui-table-view">
</ul>
</div>
</body>
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script>
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
style: 'circle',
callback: pulldownRefresh
},
up: {
auto: true,
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
var totalPage = 1;
var current_page = 1;
function pullupRefresh() {
addData("up");
}
// 创建并显示新窗口
function createA(url) {
var w = plus.webview.create(url);
plus.webview.show(w); // 显示窗口
}
function addData(tag) {
if(current_page != 1 && current_page > totalPage) {
alert("已加载到最后一页");
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
mui('#pullrefresh').pullRefresh().endPullupToRefresh(); //refresh completed
}, 150);
return;
}
var xhr = new plus.net.XMLHttpRequest();
xhr.onreadystatechange = function() {
switch(xhr.readyState) {
case 4:
if(xhr.status == 200) {
var jsonObj = eval('(' + xhr.responseText + ')');
var totalCount = jsonObj.TotalCount;
totalPage = parseInt(totalCount / 10);
if(totalCount % 10 != 0) {
totalCount++;
}
var items = eval('(' + jsonObj.Data + ')');
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for(var i = 0; i < items.length; i++) {
var item = items[i];
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a href=\'javascript:createA("' + item.Href + '")\'><img class="mui-pull-left" src="http://ohyewang.com/ItemHandle/ShowImageFromFileForMobile.aspx?id=' + item.ImgPath + '" style="width:80px;height: 100px;" ><div class="mui-media-body">' + item.Title + '</div></a>';
if(tag == "down") {
table.insertBefore(li, table.firstChild);
} else {
table.appendChild(li);
}
}
current_page++;
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
mui('#pullrefresh').pullRefresh().endPullupToRefresh(); //refresh completed
}, 150);
} else {
alert("xhr请求失败：" + xhr.readyState);
}
break;
default:
break;
}
}
xhr.open("GET", "http://ohyewang.com/index/WebAngularItemList.aspx?&fl=3c44b493-ab9e-4e67-a81a-7c8155990bca&id=" + current_page + "&lm=fa9c6590-0612-4045-82d3-04c14a38a32e&page_size=20");
xhr.send();
}
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
addData("down");
}
//侧滑容器父节点
var offCanvasWrapper = mui('#offCanvasWrapper');
//主界面容器
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
//菜单容器
var offCanvasSide = document.getElementById("offCanvasSide");
if(!mui.os.android) {
document.getElementById("move-togger").classList.remove('mui-hidden');
var spans = document.querySelectorAll('.android-only');
for(var i = 0, len = spans.length; i < len; i++) {
spans[i].style.display = "none";
}
}
//移动效果是否为整体移动
var moveTogether = false;
//侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
var classList = offCanvasWrapper[0].classList;
//变换侧滑动画移动效果；
mui('.mui-input-group').on('change', 'input', function() {
if(this.checked) {
offCanvasSide.classList.remove('mui-transitioning');
offCanvasSide.setAttribute('style', '');
classList.remove('mui-slide-in');
classList.remove('mui-scalable');
switch(this.value) {
case 'main-move':
if(moveTogether) {
//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
}
break;
case 'main-move-scalable':
if(moveTogether) {
//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
}
classList.add('mui-scalable');
break;
case 'menu-move':
classList.add('mui-slide-in');
break;
case 'all-move':
moveTogether = true;
//整体滑动时，侧滑菜单在inner-wrap内
offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);
break;
}
offCanvasWrapper.offCanvas().refresh();
}
});
//主界面‘显示侧滑菜单’按钮的点击事件
document.getElementById('offCanvasShow').addEventListener('tap', function() {
offCanvasWrapper.offCanvas('show');
});
//菜单界面，‘关闭侧滑菜单’按钮的点击事件
document.getElementById('offCanvasHide').addEventListener('tap', function() {
offCanvasWrapper.offCanvas('close');
});
//主界面和侧滑菜单界面均支持区域滚动；
mui('#offCanvasSideScroll').scroll();
mui('#offCanvasContentScroll').scroll();
//实现ios平台原生侧滑关闭页面；
if(mui.os.plus && mui.os.ios) {
mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
plus.webview.currentWebview().setStyle({
'popGesture': 'none'
});
});
}
</script>
</body>
</html>

打包：

运行效果：

大熊程序猿

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HBuilder开发IOS-Android-APP

Hello MUI html, body { background-color: #efeff4; } p { text-indent: 22px; } span.mui-icon { font-size: 14px; color: #007aff; margin-left:
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。