显示全局大菊花
AlipayJSBridge.call('showLoading', {
text: '加载中',
});
<h1>点击以下按钮看不同效果</h1>
<p>注意安卓下显示loading后,会覆盖整个界面,所以请使用系统回退键关闭loading</p>
<a href="javascript:void(0)" class="btn show">显示loading</a>
<a href="javascript:void(0)" class="btn delay">延迟2秒显示loading</a>
<a href="javascript:void(0)" class="btn notext">无文字菊花</a>
<script>
function ready(callback) {
// 如果jsbridge已经注入则直接调用
if (window.AlipayJSBridge) {
callback && callback();
} else {
// 如果没有注入则监听注入的事件
document.addEventListener('AlipayJSBridgeReady', callback, false);
}
}
ready(function() {
document.querySelector('.show').addEventListener('click', function() {
AlipayJSBridge.call('showLoading', {
text: 'Loading',
});
setTimeout(function() {
AlipayJSBridge.call('hideLoading');
}, 3000);
});
document.querySelector('.delay').addEventListener('click', function() {
AlipayJSBridge.call('showLoading', {
text: 'Loading',
delay: 2000,
});
setTimeout(function() {
AlipayJSBridge.call('hideLoading');
}, 5000);
});
document.querySelector('.notext').addEventListener('click', function() {
AlipayJSBridge.call('showLoading', {
text: ' ',
});
setTimeout(function() {
AlipayJSBridge.call('hideLoading');
}, 3000);
});
});
</script>
AlipayJSBridge.call('showLoading',{
text, delay
})
名称 | 类型 | 描述 | 必选 | 默认值 | 版本 |
---|---|---|---|---|---|
text | string | 文本内容;如需设为无文案,需传入一个空格 | N | ‘加载中’ | |
delay | int | 延迟多少毫秒后显示;如果在此时间之前调用了hideLoading, 则不会再显示 | N | 0 | |
autoHide | bool | 默认情况下容器会在pageFinish的后会主动隐藏菊花,默认true, 传入false,关掉自动隐藏(only android) | N | true | 10.0.15 |
cancelable | bool | 安卓返回键是否消掉菊花,默认物理返回键会消掉菊花(only android) | N | true | 10.0.18 |