wx-delay-loading

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

Usage no npm install needed!

<script type="module">
  import wxDelayLoading from 'https://cdn.skypack.dev/wx-delay-loading';
</script>

README

一、介绍

可控制延迟显示的微信小程序 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()
  }
})
  1. 在使用组件的页面或组件的配置 json 内，引入组件

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

// page.json

"usingComponents": {
  // 微信小程序组件名不允许使用wx做前缀
  "delay-loading": "wx-delay-loading/index"
}
  1. 在页面 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>
  1. 请求开始时（例如 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