登陆

收拾 | MUI项目中运用标题栏进度条或正在加载控件

admin 2019-07-18 230人围观 ,发现0个评论

在APP项目开发中,咱们都会运用一些提示性的控件来给用户优质的体会。运用MUI开发APP时,其页面运用H5来构建,这时咱们需要在页面初始化的时分运用各类提示性组件(如弹窗、正在加载等)给用户友爱的提示,否则会由于各类原因(如网络、设备等影响)会影响用户的体会,或许交互。关于这种状况,我所运用的是,在跳转页面时,一种办法运用制作原生导航控件时设置窗口标题栏控件显现进展参数;另一种运用H5+ API的nativeUIshowWaitingcloseWaiting办法,在plus四川飞普科技有限公司Ready中运用showWaiting,收拾 | MUI项目中运用标题栏进度条或正在加载控件在页面烘托完成后运用closeWaiting。这两种办法都是依据mui.openWindow之后的。

标题栏进展条

咱们能够经过在mui.openWindow的styles节点中设置titleNView节点的相关参数。

    mui.openWindow({
url: "home.html", //翻开窗口页面
id: "home",
styles: {
titleNView: { //窗口标题栏控件
titleText: "新闻详情页", //标题栏文字
titleColor: "#FF0000", //字体色彩
titleSize: "18px", //字体大小
progress: { //标题栏控件的进展条款式
color: "#00FF00", //进展条色彩
height: "2px", //进展条高度
}
}
}
})

正在加收拾 | MUI项目中运用标题栏进度条或正在加载控件载提示控件

运用加载提示控件,相对来说,愈加清晰,当加载提示控件显现时,阐明数据正在烘托中。

   mui.plusReady(function() {
plus.nativeUI.showWaiting("正在加载...");
//页面烘托数据办法
var list = [{
收拾 | MUI项目中运用标题栏进度条或正在加载控件 "id": 1,
"title": "第一条新闻"
}, {
"id": 2,
"title": "第二条新闻"
}];
var data = {
news: list
};
var html = template('newsl', data);
document.getElementById('newsList').innerHTML = html;
plus.nativeUI.closeWaiting();
})

两种办法各有特点,能够依据实际状况来运用。

示例

//index.html



主页







//home.html
收拾 | MUI项目中运用标题栏进度条或正在加载控件







请关注微信公众号
微信二维码
不容错过
Powered By Z-BlogPHP