wx-delay-loading
v2.0.2
Published
可控制延迟显示的微信小程序loading组件,默认请求超过0.5s才显示loading动画;支持自定义loading显示内容
Downloads
10
Readme
一、介绍
可控制延迟显示的微信小程序 loading 组件,默认请求超过0.5s才显示loading动画;支持 slot 自定义 loading 内容。
在项目中,若网络良好的情况下,每次请求都显示loading动画,会导致页面短时间内频繁闪现loading动画,用户体验不佳。本组件可自定义loading组件显示延时,只有当请求超过设置的时间未完成时,才显示loading动画,减少loading动画出现的次数。
注:2.0版本简化了使用流程及API,与1.x版本不兼容。
点击查看 demo
二、使用
安装
npm i wx-delay-loading
组件初始化:在 app.js 的 onLaunch 中执行组件初始化方法,挂载全局对象 DLoading
// app.js
import DelayLoading from 'wx-delay-loading/lib/index'
App({
onLaunch: function () {
// 初始化组件,挂载全局对象 DLoading
DelayLoading.init()
}
})
- 在使用组件的页面或组件的配置 json 内,引入组件
注:微信小程序组件名不允许使用 wx 做前缀
// page.json
"usingComponents": {
// 微信小程序组件名不允许使用wx做前缀
"delay-loading": "wx-delay-loading/index"
}
- 在页面 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>
- 请求开始时(例如 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 组件 | - | - |