npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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

二、使用

  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