收藏
回答

关于Loading显示时机的经验分享

问题模块
API和组件


好的UI应该离不开提示信息,完善的提示信息可以让访客更清楚知道自己在做什么,其中“Loading”的使用最为频繁,常见于游戏场景的切换中,由于切换场景可能比较耗时,需要告诉用户。


但是在 App 请求接口的时候,如果每个请求前都显示 Loading 的话,就会非常频繁的看见 Loading 的身影,这也非常影响访问和访客的心情。


我的经验是,用 `setTimeout` 设置一个时间,比如 1s 后再显示,如果请求接口在 1s 内完成了,那么完全有机会在触发 `setTimeout`之前清除定时器,这样就不会显示 Loading 了。


handlePostCategoryTap: function (e) {
   let category = e.currentTarget.dataset.item;
   
   // 技巧在这里
   let showLoadingTimer = setTimeout(() => {
       wx.showLoading({
           title: '请求中',
       });
   }, 1000);
   wx.request({
       url: `https://xxx.com/api/post/${category.id}`,
       success: (res) => {
           if (200 == res.statusCode) {
               this.setData({
                   currentPostCategory: category,
                   post: res.data,
               });
               wx.setNavigationBarTitle({
                   title: `论坛 - ${category.name}`,
               });
               wx.hideLoading();
               this.mainBoxShadeTap();
           } else {
               wx.showToast({
                   title: `服务器发生错误:${res.statusCode}`,
                   icon: 'loading',
               });
           }
       },
       fail: () => {
           wx.showToast({
               title: `请求发送失败!`,
               icon: 'loading',
           });
       },
       complete: () => {
           // 如果请求在 setTimeout 前完成了,那么就不会触发Loading
           clearTimeout(showLoadingTimer);
       },
   });
},


最后一次编辑于  2017-08-06  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答