Framework7 - 加载指示符（Preloader）使用说明
作者：hangge | 2016-08-21 10:11
Framework 7 提供了一个好用的加载指示符（Preloader），一个不断旋转的菊花状环形进度条。当我们页面需要加载数据，或者执行比较费时的操作时可以使用。
3，使用模态的方式显示加载指示符
上面的样例是直接将加载指示符放置在页面上。我们也可以通过 js 将其通过模态的方式自动显示在页面上。（既然是模态的，说明在加载指示符显示的时候我们是不可以进行任何操作的。）
而且这个加载指示符是使用 SVG 绘制，并使用 CSS 来进行动画，所以可以很方便的改变它的大小。
1，加载指示符的使用
只需要创建任意标签并加上”preloader”类即可。
<span class="preloader"></span>
2，修改加载指示符的大小和颜色
（1）加载指示符有2个颜色供选择：其中一个颜色是配合亮色背景（默认样式），另一个颜色配合暗色背景。
（2）要改变大小，只要直接设置 width、height 样式属性即可。
<body>
...
<div class="page-content">
<div class="content-block row">
<!-- 默认样式的加载指示符 -->
<div class="col-25">
Default<br>
<span class="preloader"></span>
</div>
<!-- 白色的加载指示符（适用于深色背景） -->
<div class="col-25 col-dark">
White<br>
<span class="preloader preloader-white"></span>
</div>
<!-- 修改加载指示符尺寸（改成42px*42px） -->
<div class="col-25">
Big<br>
<span style="width:42px; height:42px" class="preloader"></span>
</div>
<!-- 修改尺寸以及颜色（适用于深色背景） -->
<div class="col-25 col-dark">
White<br>
<span style="width:42px; height:42px" class="preloader preloader-white"></span>
</div>
</div>
</div>
...
<style>
.col-25 {
padding:5px;
text-align:center;
}
.col-dark {
background:#222;
}
</style>
</body>
3，使用模态的方式显示加载指示符
上面的样例是直接将加载指示符放置在页面上。我们也可以通过 js 将其通过模态的方式自动显示在页面上。（既然是模态的，说明在加载指示符显示的时候我们是不可以进行任何操作的。）
比如我们可以在加载数据的时候将其弹出显示，告知用户当前正在加载。当加载完毕后自动将其关闭。
（1）样例效果图
点击链接后，在页面中央显示加载指示符。过个两秒，加载指示符自动消失。
（3）js代码
4，Ajax请求时自动显示加载提示符
App 中如果有很多页面都有数据请求，要是每个请求都像上面一样都要手动添加代码显示、隐藏加载提示符。会略显麻烦。
我们可以在 Framework7 初始化的时候对 Ajax 请求进行拦截，进行统一处理。即发起请求时显示加载提示符，请求完毕后隐藏加载提示符。
（1）样例效果图
点击链接后，在页面中央显示加载指示符。过个两秒，加载指示符自动消失。
（2）html页面代码
<body>
...
<div class="page-content">
<div class="content-block">
<p><a href="#" class="open-indicator">显示Indicator</a></p>
</div>
</div>
...
</body>
$$('.open-indicator').on('click', function () {
myApp.showIndicator();
setTimeout(function () {
myApp.hideIndicator();
}, 2000);
});
4，Ajax请求时自动显示加载提示符
App 中如果有很多页面都有数据请求，要是每个请求都像上面一样都要手动添加代码显示、隐藏加载提示符。会略显麻烦。
我们可以在 Framework7 初始化的时候对 Ajax 请求进行拦截，进行统一处理。即发起请求时显示加载提示符，请求完毕后隐藏加载提示符。
// 初始化 app
var myApp = new Framework7({
// ajax请求开始
onAjaxStart: function (xhr) {
myApp.showIndicator();
},
// ajax请求完毕
onAjaxComplete: function (xhr) {
myApp.hideIndicator();
}
});
全部评论（0）