评论

升级2.0!可延迟显示的小程序loading组件

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

一、介绍

可控制延迟显示的微信小程序 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时,每次请求都会显示组件。<br/>
    请求结束时,调用静态方法 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

<br/>

对象 methods

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

<br/>

六、示例

点击查看 demo

最后一次编辑于  2021-05-17  
点赞 5
收藏
评论

2 个评论

  • Last
    Last
    2022-05-07

    好东西 绝绝子

    2022-05-07
    赞同
    回复
  • 麦兜
    麦兜
    2021-05-25

    先mark

    2021-05-25
    赞同
    回复
登录 后发表内容