一、介绍

可控制延迟显示的微信小程序 loading 组件，默认请求超过0.5s才显示loading动画；支持 slot 自定义 loading 内容。

在项目中，若网络良好的情况下，每次请求都显示loading动画，会导致页面短时间内频繁闪现loading动画，用户体验不佳。本组件可自定义loading组件显示延时，只有当请求超过设置的时间未完成时，才显示loading动画，减少loading动画出现的次数。

注：2.0版本简化了使用流程及API，与1.x版本不兼容。

点击查看 demo

二、使用

1. 安装 npm i wx-delay-loading

2. 组件初始化：在 app.js 的 onLaunch 中执行组件初始化方法，挂载全局对象 DLoading

// app.js
import DelayLoading from 'wx-delay-loading/lib/index'

App({
  onLaunch: function () {
    // 初始化组件，挂载全局对象 DLoading 
    DelayLoading.init()
  }
})

3. 在使用组件的页面或组件的配置 json 内，引入组件

注：微信小程序组件名不允许使用 wx 做前缀

// page.json

"usingComponents": {
  // 微信小程序组件名不允许使用wx做前缀
  "delay-loading": "wx-delay-loading/index"
}

4. 在页面 wxml 中使用，设置 id 属性为 loading，否则 DLoading 静态方法会找不到组件。

注：若 delay-loading 组件存在父组件，需要同时把父组件和 delay-loading 组件的 id 设为 loading

// page.wxml 

// 不使用 slot
<delay-loading id="loading" />

// 使用 slot 自定义内容
<delay-loading id="loading" customLoading="{{true}}">
  <view class="container">
    <image class="logo" src="/static/image/logo.png" mode="widthFix" />
    <view class="text">加载中...</view>
  </view>
</delay-loading>

5. 请求开始时（例如 wx.request），调用全局对象 DLoading 的静态方法 setReqDelay(delaytime)，delaytime 默认为超过500毫秒请求未结束则显示 loading 组件；delaytime 为0时，每次请求都会显示组件。 请求结束时，调用静态方法 endReq()，会检查正在进行的请求数，若为0，则隐藏 loading 组件。

// page.js

Page({
  // 仅为示例
  exampleRequest () {
    // 请求开始
    DLoading.setReqDelay(300) // 请求超过0.3秒没完成，显示 loading 组件
    wx.request({
      url: 'https://example.com/getData',
      complete () {
        // 请求完成
        DLoading.endReq()
      }
    })
  },

})

三、进阶：在统一封装请求 request.js 内使用

项目开发中，通常会针对请求和响应进行统一处理，封装成一个 request.js 使用。

// request.js

const request = (options) => {
  return new Promise ((resolve, reject) => {
    // 请求开始前调用设置延时
    DLoading.setReqDelay()
    wx.request({
      ...options,
      success (res) {
        // 请求成功后的各种处理操作...
        resolve(res.data)
      },
      fail (err) {
        // 请求失败后的各种处理操作...
        reject(err)
      },
      complete () {
        // 请求完成
        DLoading.endReq()
      }
    })
  })
}
export default request

// page.js
import request from request.js

Page({
  // 仅为示例
  exampleRequest () {
    // 使用封装后的request
    request({
      url: 'https://example.com/getData'
    }).then(res => {
      // 对返回数据的处理...
    })
  },

})

四、调试：模拟低网速情况

通常在网络环境良好的情况下，请求都会很快完成，不会超过0.5s。可通过微信开发者工具-调试器-Network，把网络设置 Online，更改为 Slow 3G，或者使用 Custom 自定义网络速度。

五、文档

组件 options

| 参数 | 说明 | 类型 | 默认值 | | :-------- | :--------| :------: | :-- | customLoading | 是否使用 slot 插槽自定义 loading 内容 | boolean | false | | id | 组件标识 | string | 需手动设置为 loading |

对象 methods

| 方法名 | 说明 | 参数 | 参数类型 | | :-------- | :--------| :------: | :------: | | init | 初始化组件，挂载全局对象 DLoading | - | - | - | | setReqDelay | 标记请求开始并设置延迟显示的时间 | 延迟的时间，单位毫秒 | number | | endReq | 检测正在进行的请求数，若清零则隐藏 loading 组件 | - | - |

六、示例

点击查看 demo