weui 加载提示_WeUI与WeUI.JS配合切换进入页面显示加载动画

WeUI与WeUI.JS是腾讯开发的适用于微信下开发网页的框架，如果在切换页面，即当前页面切换(跳转)到其他页面时，如何显示加载动画呢？

我们知道，一般进入页面非常生硬，加上还有各种接口的请求，那么会有加载时间。在这个时间给予用户提示是非常有必要的。

下面是一个实例，用户经过的步骤：进入页面 - 提示加载动画 - 加载页面内容完毕 - 关闭提示加载动画：

Document

var loading = weui.loading('loading', {

className: 'custom-classname'

});

window.onload = function () {

loading.hide(function () {

console.log('`loading` has been hidden');

});

}

先定义loading执行，这个执行会在页面的DOM加载完后就显示，而之后的 window.onload会让页面加载完之后再执行函数。

参考资料：

https://github.com/Tencent/weui/wiki/getting-started

https://github.com/Tencent/weui.js/blob/master/docs/component/loading.md

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

文章版权归鸽听网所有，未经许可不得转载，责任编辑：小旭旭。

分享到：

weui 加载提示_WeUI与WeUI.JS配合切换进入页面显示加载动画相关推荐

weui 加载提示_weui Msg提示页使用教程
js代码 // pages/03caozuofankui/03-msg.js Page({ /** * 页面的初始数据 */ data: { }, openSuccess: function () { ...
weui 加载提示_weui Toast弹出式提示使用教程
js代码// pages/03caozuofankui/05-toast.js Page({ /** * 页面的初始数据 */ data: { }, openToast: function () { ...
【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...
nuxt。js 部署上线后页面一直加载_应用系统增量部署通用流程实践
请点击上方"民生运维人" 添加订阅! 1 前言应用部署是运维人员每日面对的重要问题之一.尤其是在应用交付频率越来越高的当下,运维人员经常需要花费巨大的成本和心血来完成频繁的应用部 ...
【vue】用WOW.js+animate.css实现页面滚动加载元素动画
一.场景在很多的网站中,我们发现在滚动条滑动的时候一些元素显示出来的时候是有一些动画效果的,这样看起来页面更具有活力,增加用户体验.当然这些动画我们可以通过判断滚动条的位置或者判断元素距离可视窗口的 ...
微信小程序使用weui自定义底部导航栏，切换不同页面显示不同tabbar
在一个微信小程序中想要用到两种不同的tabbar样式,可以使用微信小程序自带插件tabbar 首先在页面json文件中引入 tabbar {"navigationBarTitleText&q ...
weui 加载提示_WEUI滚动加载
var row = 6, page = 1; var loading = false; //状态标记 $(document.body).infinite().on("infinite&quo ...
threejs 加载两个场景_three.js 场景切换
用6个面组成的立方体作为场景图,发现会出现变形的现象,css3DRenderer 不会变形,但是不方便增加文字,最后采用scene的背景作为场景,背景是用cubeTextureLoader()加载的. ...
python跳转到新页面、如何等待页面加载完_python urllib2 – 在抓取之前等待页面完成加载/重定向？...
我正在学习制作网络抓取工具,并希望抓住TripAdvisor的个人项目,使用urllib2抓取html. 但是,我遇到了一个问题,使用下面的代码,我回来的html是不正确的,因为页面似乎需要一秒钟重定 ...
Vue+wow.js+animate.css-实现页面滚动可视区域动画效果展示-案例
说明 wowjs-当页面向下滚动时,动画出现:当页面向上回滚时,动画不会回退. 安装 npm install wowjs --save-dev npm install animate.css --sa ...

weui 加载提示_WeUI与WeUI.JS配合切换进入页面显示加载动画

weui 加载提示_WeUI与WeUI.JS配合切换进入页面显示加载动画相关推荐

最新文章

热门文章