Framework7 - 加载指示符（Preloader）使用说明

2016-08-21 发布：hangge 阅读：2782

Framework 7 提供了一个好用的加载指示符（Preloader），一个不断旋转的菊花状环形进度条。当我们页面需要加载数据，或者执行比较费时的操作时可以使用。

而且这个加载指示符是使用 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）样例效果图
点击链接后，在页面中央显示加载指示符。过个两秒，加载指示符自动消失。

（2）html页面代码

<body>
  ...
  <div class="page-content">
    <div class="content-block">
      <p><a href="#" class="open-indicator">显示Indicator</a></p>
    </div>
  </div>
  ...
</body>

（3）js代码

$$('.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();
          }
});