小程序中使用loading组件显示正在加载

最新推荐文章于 2023-09-03 12:55:07 发布

原创最新推荐文章于 2023-09-03 12:55:07 发布 · 1.4w 阅读

0 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍如何在小程序中快速实现loading组件的显示与隐藏，通过三个简单步骤即可完成正在加载状态的展示，适用于需要增强用户体验的场景。

三步实现小程序loading组件显示正在加载

第一步先在wxml中编写点击事件按钮

<button type="default" bindtap="loadingNav">点击弹出正在玩命加载...</button>

第二步先在wxml中位置上设置loading

<loading hidden="{{loadingHidden}}">
        玩命加载中...
</loading>

第三步在js文件中设置

data: {
    loadingHidden: true//现在data中设置loadingHidden，跟wxml的loading绑定好
  },
methods: {
   activeNav(e) {
     this.setData({
          loadingHidden: false
        });
        var that = this;
        setTimeout(function(){
		     that.setData({
    		     loadingHidden: true
   		     });
   		},1000)
   }
 }