整理 | MUI中使用标题栏进度条和正在加载控件
2019-07-06 本文已影响22人
白晓明
在APP项目开发中，我们都会使用一些提示性的控件来给用户优质的体验。使用MUI开发APP时，其页面使用H5来构建，这时我们需要在页面初始化的时候使用各类提示性组件（如弹窗、正在加载等）给用户友好的提示，否则会因为各类原因（如网络、设备等影响）会影响用户的体验，或者交互。对于这种情况，我所使用的是，在跳转页面时，一种方式使用绘制原生导航控件时设置窗口标题栏控件显示进度参数；另一种使用H5+ API的nativeUI的showWaiting和closeWaiting方法，在plusReady中使用showWaiting，在页面渲染完成后使用closeWaiting。这两种方式都是基于mui.openWindow之后的。
标题栏进度条
我们可以通过在mui.openWindow的styles节点中设置titleNView节点的相关参数。
url: openWindowUrl,//打开窗口页面
id: openWindowId,
styles: {
titleNView: {//窗口标题栏控件
titleText: "标题栏名称",//标题栏文字
titleColor: "#FF0000",//字体颜色
titleSize: "18px",//字体大小
progress: {//标题栏控件的进度条样式
color: "#00FF00",//进度条颜色
height: "2px",//进度条高度
}
}
}
})
正在加载提示控件
使用加载提示控件，相对来说，更加明确，当加载提示控件显示时，说明数据正在渲染中。
plus.nativeUI.showWaiting("正在加载...");
//页面渲染数据方法
var list = [{"id": 1, "title": "第一条新闻"}, {"id": 2, "title": "第二条新闻"}];
var data = {
news: list
};
var html = template('newsl', data);
document.getElementById('newsList').innerHTML = html;
plus.nativeUI.closeWaiting();
})
两种方式各有特点，可以根据实际情况来使用。
示例
<!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>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
document.getElementById('btn').addEventListener('tap', function() {
mui.openWindow({
url: "home.html", //打开窗口页面
id: "home",
styles: {
titleNView: { //窗口标题栏控件
titleText: "新闻详情页", //标题栏文字
titleColor: "#FF0000", //字体颜色
titleSize: "18px", //字体大小
progress: { //标题栏控件的进度条样式
color: "#00FF00", //进度条颜色
height: "2px", //进度条高度
}
}
}
})
})
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">首页</h1>
</header>
<div class="mui-content">
<button id="btn" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">跳转页面</button>
</div>
</body>
</html>
//home.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" />
<link href="css/mui.css" rel="stylesheet" />
</head>
<body>
<div class="mui-content">
<ul class="mui-table-view" id="newsList">
<script id="newsl">
{{each news}}
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
{{value.title}}
</a>
</li>
{{/each}}
</script>
</ul>
</div>
<script src="js/mui.js"></script>
<script src="js/template-web.js"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function() {
plus.nativeUI.showWaiting("正在加载...");
//页面渲染数据方法
var list = [{
"id": 1,
"title": "第一条新闻"
}, {
"id": 2,
"title": "第二条新闻"
}];
var data = {
news: list
};
var html = template('newsl', data);
document.getElementById('newsList').innerHTML = html;
plus.nativeUI.closeWaiting();
})
</script>
</body>
</html>
