码迷,mamicode.com
首页 > 其他好文 > 详细

Framework7学习笔记之 加载指示器

时间:2018-02-22 10:52:04      阅读:704      评论:0      收藏:0      [点我收藏+]

标签:ade   fun   reload   弹窗   一个   out   文字   cti   span   

 

 

一:图标型加载指示器

    这种指示器作为一个图标内嵌到页面中,用于显示耗时到加载操作。

      <!-- 默认加载器 -->
        <span class="preloader"></span>
      <!-- 白色加载器,另加"preloader-white"类 -->
        <span class="preloader preloader-white"></span>
      <!-- 自定义尺寸的默认加载器 -->
        <span style="width:42px; height:42px" class="preloader"></span>
      <!-- 自定义尺寸的白色加载器 -->
        <span style="width:42px; height:42px" class="preloader preloader-white"></span>

 

二:弹窗型加载指示器

    1:预加载弹窗

$$(‘preloader‘).on(‘click‘, function () {
    myApp.showPreloader(‘预加载标题‘)//显示预加载弹窗
    setTimeout(function () {
        myApp.hidePreloader();
    }, 延时);//延时关闭预加载弹窗
}); 

    2:指示器弹窗

$$(‘.indicator‘).on(‘click‘, function () {
    myApp.showIndicator();//显示指示器
    setTimeout(function () {
        myApp.hideIndicator();
    }, 延时);//隐藏指示器
});

    预加载与指示器的区别:

    预加载由“标题+指示器”组成,标题作为提示信息。

    指示器则只有一个加载动画,没有文字提示。

 

Framework7学习笔记之 加载指示器

标签:ade   fun   reload   弹窗   一个   out   文字   cti   span   

原文地址:https://www.cnblogs.com/ygj0930/p/8458009.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!