如何使用Mui实现通过js实现进入界面就显示加载图标加载等待的功能代码功能代码的教程方法

最新推荐文章于 2021-08-06 16:43:17 发布
最新推荐文章于 2021-08-06 16:43:17 发布
阅读量1.5k 收藏
点赞数 1
分类专栏： 专题技术文献 HBuilderX 招聘项目APP 安卓苹果手机 JavaScript HTML 加载图标 文章标签： 加载图标 HBuilderX HTML、JavaScript 安卓苹果手机 招聘项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41890694/article/details/90632492
版权

如何使用Mui实现通过js实现进入界面就显示加载图标加载等待的功能代码功能代码的教程方法

作者：张国军_Suger
开发工具与关键技术：HBuilder X、mui、JavaScript、安卓苹果手机
        由于需求需要我们达到一个怎样的目的呢？那么我们就应该想着如何去做，比如说，有些界面需要我们进入的时候就显示一个加载的提示，通常来说显示文字有点太别扭，如我我们改成图标显示加载效果就完全不一样了，在此也给小伙伴们讲解一下，希望能帮到小伙伴。
进入需要加载显示的页面的JavaScript方法语句代码视图：
进入需要加载显示的页面的JavaScript方法语句代码视图：
进入需要加载显示的页面的JavaScript方法语句代码展示：

$(document).ready(function
最低0.47元/天 解锁文章
张国军_Suger
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
mui 控制页面标签显示隐藏 调回上一页重新加载数据
yangsitong1314的博客
11-28 2701
设置元素显示与隐藏：.mui-visibility默认为设置元素可见，.mui-hidden默认为设置元素隐藏。 //设置加载样式隐藏 document.getElementById('maskloader').classList.add('mui-hidden'); mui 子父页面刷新问题 mui.init({ beforeback: function() { //获
移动端开发框架mui之要打开的页面loaded不自动显示，等服务器返回数据后，再做处理逻辑
zgphacker2010的专栏
04-18 244
loaded_no_auto_show_home.html(主页) <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,m
mui显示加载中动画
Wnnu_N1的博客
08-08 1万+
最近使用mui较多，每次页面加载时希望显示加载中的样式，就是那种一直转圈的，但是在mui的官方文档中的对话框并没有这种样式，在网上查了一下，发现可以引入插件的形式，显示加载中样式，但每个页面都要引入颇为麻烦，仔细研究后发现mui中也有这种样式： 代码如下： &lt;div class="mui-loading"&gt; &lt;div class="mui-spinner"&gt; ...
mui ajax 正在加载动画,mui 可以上拉加载，只要触碰，就会完成一次加载，没有正在 loading... 加载的状态...
weixin_42314680的博客
08-06 354
下拉时无状态：上拉时也无状态：且上下拉都会报这样的错误,这个错误是只要触碰就会报错。首次加载不执行拖动操作也会报一个这样的错误，我查过原因，有的说是mui传的参数有问题，可是我没有专门给mui传参数呀，不知道这个错误到底从哪来的：我的html结构这样的：我的JS，下面的js可以正常的加载出数据，但是加载过程中的 loading... 状态没有的且触碰页面就不停的报错的问题，没有找到原因，请各位抽空...
mui开发APP教程之mui.ajax请求后出现“加载中”
04-25 2万+
利用mui.ajax向服务器请求数据会出现请求超时的情况，一般若是10S之后还没有响应，就会定义为超时，那么出错了的时候，这10秒钟不可能给用户白屏，即便是请求成功之后打开一个新页面，那么这个间隔时间也给用户响应。 但是mui 的ajax并没有实现类似jquery的ajaxStart 和 ajaxStop方法，然而在移动端上这两个方法还是比较常用的，比如在向后台提交数据的时候显示loading的...
MUI等待框的加载与关闭
杨葱儿
02-25 4575
plus.nativeUI.showWaiting();　　//等待框开启 plus.nativeUI.closeWaiting();　//等待框关闭 mui.currentWebview.show();　　//当前页面显示 （一般用openWindow打开新页面，且设置show:{autoShow:false}） ...
MUI+jQuery手机端考试答题系统代码
06-10
- **js**：JavaScript代码通常被组织在这个目录下，包括核心逻辑、MUI和jQuery的库文件，以及可能的自定义脚本。 - **css**：这里包含所有CSS样式文件，用于控制页面的布局和样式，可能有MUI的默认样式和项目的...
mui上拉加载+选项卡+ajax
12-25
`mui`的上拉加载功能通常通过`mui.pullRefresh()`方法初始化，并结合`ajax`请求来获取新数据。 接着，选项卡（Tab）是用户界面设计中的常见元素，用于分隔内容并提供导航。`mui`框架的选项卡组件允许开发者创建可...
mui实现简单布局.zip
06-05
`mui.js`是MUI的核心JavaScript库，提供了大量的组件和API，如滑动、下拉刷新、上拉加载等，使得开发者能够轻松实现交互功能。在实现侧边栏和首页切换的场景中，我们可能会用到MUI的侧滑菜单（`sliding-menu`）组件...
mui 功能例子
04-17
本篇文章将深入探讨"MUI功能例子"中的核心知识点，包括webview模式、自定义图标、沉浸式标题、九宫格布局、下拉刷新、侧滑导航、ECharts和D3数据可视化、扫码功能以及轮播图的实现。 1. **Webview模式**：Webview...
MUI 使用原生底部栏（中间凸起图片）
11-06
例如，你可以使用`.mui-bar-tab`类为底部栏添加基础样式，`.mui-icon`和`.mui-icon-selected`类来设置未选中和选中的图标状态。 3. **中间凸起效果**：为了实现中间图片凸起，你需要对选中项应用特殊的CSS样式。这...
mui显示等待框
qq_35383788的博客
06-16 900
这里使用的是5+自带的等待框： plus.nativeUI.showWaiting();　　//等待框开启 plus.nativeUI.closeWaiting();　//等待框关闭 参考:https://blog.csdn.net/weixin_44285250/article/details/87918882 不过有的时候会出现这样的问题，当我用ajax请求数据的时候，数据请求过快，导致我刚开始等待就直接关闭了，从用户的角度就是看不到加载的等待框。所以这边加了个延时操作setT...
拓展小知识（一）——使用 CSS 和 JS 加载阿里小图标
别呀的博客
06-08 677
一、什么是阿里图标？ 这里可能会有人疑惑阿里图标是什么、有什么用？别急看完下面描述你就懂了 上图的是一个导航栏， 大家可以看到红色方框里有许多图标，这个要怎么弄？其实这并不难，如果要我们自己写的话不仅要考虑布局、图片导入等待，说到底还是挺麻烦。所以我们就可以用到阿里图标库，里面有各种各样的图标供我们使用，我们也可以减少代码量，仅需几行就搞定 二、阿里图标库使用步骤 ① 直接百度 阿里图标库官网，进入的官网界面如下： ② 如果你没有账号的话就先注册一个，这里我用查找“微博登录”图标为例。 首先在搜索框
MUI-改变waiting中的加载loading图片
a11441555的博客
11-20 2851
如果你在使用MUI框架开发一套移动端的网站或打包Android的话，在跳转各个href的时候，应该会发现href无效化，OK。这就是MUI框架为了使得网页之间的跳转，尽量能与原生开发的效果保持一致所做出来的努力。 解决href跳转，我们一般都是使用下面这个javascript语句，通过调用mui.openWindow()函数来跳转界面，具体参数可以看MUI的手册。 mui('.dn_nav_...
mui在线加载html,MUI 预加载页面
weixin_39605004的博客
06-04 539
MUI 预加载页面的几种方式：一、预加载页面mui.preload必须放在plusReady事件中var page = null;mui.plusReady(function() {//预加载页面mui.preload必须放在plusReady事件中page = mui.preload({url: 'preload.html',id: 'preload',extras: {name: 'duran...
MUI显示原生等待框
ljh243581579的博客
08-24 6621
//设置原生等待框 var nwaiting = plus.nativeUI.showWaiting(); //刷新页面 location.reload(); //刷新页面之后关闭等待狂 nwaiting.close(); //弹出吐司 mui.toast("设置默认地址成功！");
MUI中Loading加载动画设置
热门推荐
Mr-k的博客
10-25 2万+
MUI跳转页面之后，加载数据的时候，页面上会出现短暂的空白，这样给用的体验会不太好，所以，可以通过H5+的 nativeUI 模块中的showWaiting显示系统等待对话框 var wt = plus.nativeUI.showWaiting("",{loading:{icon:"/image/12.png",interval:'100000ms',height:'50px'},size:
MUI-button（按钮），加载中按钮
LzzMandy的博客
12-14 3912
当用户点击按钮后，需要向服务端提交数据或等待服务端响应时，常常需要提示“正在提交”，并将按钮设置为disabled，避免用户重复点击、重复提交；加载中按钮支持修改 loading状态的文案、显示的icon和icon的位置,如下: 属性名 作用 data-loading-text loading 状态显示的文案,默认为: loading data-loading-icon ...
mui中原生js实现搜索功能
最新发布
06-02
这段代码同样实现了一个简单的搜索功能，在MUI框架下使用了MUI的样式类来控制显示或隐藏。其中，`mui.init()`是MUI的初始化方法，`input`事件监听用户在输入框中输入内容，`classList`属性用于添加或移除样式类。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张国军_Suger

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值