《H5 App开发》MUI框架显示加载中动画

最近使用MUI框架比较多，现在有个需求就是在每个页面加上一个加载中动画

如图：

在百度上找到两个MUI框架的加载中样式，

第一种是需要引用一个js库，在这里不多做解释，小编推荐第二种方式，

只需要一串代码就可以实现

<div class="mui-loading" v-if="loading">
     <div class="mui-spinner"></div>
</div>

可以利用vue中v-if来控制显示，也可以添加文字

<div class="mui-loading" v-if="loading">
    <div class="mui-spinner"></div>
    玩命加载中...
</div>

细节样式方面，在css中稍微调动。

原文地址：https://www.cnblogs.com/chensv/p/10132571.html

时间： 2024-10-07 23:18:57

《H5 App开发》MUI框架显示加载中动画的相关文章

jquery mobile中显示加载中提示框和关闭提示框

在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更好一些. 先看两个方法,显示和关闭,方法来自于参考:http://blog.csdn.net/zht666/article/details/8563025 <script> //显示加载器 function showLoader() { //显示加载器.for jQuery Mobile 1.2.

微信小程序 在使用wx.request时显示加载中

微信小程序中,向后台请求数据是,通常想给用户提示正在加载中,如下图: 我们可以用wx.showLoading(OBJECT),当请求服务器的地方多了,怎么才能不每次都要去调用函数,我们只要对wx.request加工下就可以了,在utils下新建js文件network.js var requestHandler = { url: '', data: {}, method: '', success: function (res) { }, fail: function () { }, complet

WPF防止界面卡死并显示加载中效果

原文:WPF防止界面卡死并显示加载中效果 网上貌似没有完整的WPF正在加载的例子,所以自己写了一个,希望能帮到有需要的同学 前台: <Window x:Class="WpfApplication1.Loading" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml

简单的“加载中”动画效果

在日常开发过程中,处理一些延迟操作的时候,经常需要显示一个"加载中"对话框来来表示程序正在请求或正在处理.那么如何写一个最简单的动画效果呢? 这里我写了个demo: MainActivity: public class MainActivity extends Activity {     //ProgressDialog用于显示加载对话框用     private ProgressDialog progressDialog = null;     //显示结果用     privat

MUI框架预加载

MUI - 预加载 预加载都是在mui.init({)}中执行的 方式一:preload一次仅能预加载一个页面(除非循环) var subWebview = mui.preload({ url: 'examples/accordion.html', id: 'template_sub', top: ' styles: { 48 px ', bottom: '0px' } }); 不设置循环,第一遍可以,第二遍开始就还是卡顿,效果很不好,特别是添加了图片,或者图片滚动 方式二:create一次仅能

Android应用之——仿美团loading加载中动画

前言 想必用过美团客户端的用户对美团那个加载小人的动画印象很深刻,一个可爱的小人在那拼命的跑.这个动画实现的方法其实很多,今天这里就用frame动画来实现一下. 一.效果图 二.布局文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_w

使用svg显示加载中提示界面

<div> <ul v-if="true"> <li></li> <li></li> <li></li> </ul> <ul v-else="false"> <li> <img src="../images/icon.svg"> </li> </ul> 原文地址:https://w

用纯CSS实现加载中动画效果

HTML <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div> </div> CSS .pswp__preloader__icn { opacity:0.75; width: 24px; he

mui 上拉加载更多的使用

最近工作之余在用mui的框架开发,对mui了解了一些.在真正的app开发项目中,mui上拉加载模块中有两个坑,现在说一下. 1.在函数自己上拉加载行为后的回调函数 该函数是必须要写的,用来写自己的逻辑需求,但是一般情况下,需要设置显示为"加载更多"还是"没有更多数据了". 看了一些博客和官方文档,基本上都把这个设置放在了定时器中 在定时器中调用获取数据的方法(自己的业务需求) 2.在mui封装的上拉加载中,点击某一项会失效.这个是真的很坑.不过网上也有解决方法.就是