在前端开发中，我们经常需要添加一些 loading 效果来提高用户体验。wepy-com-loadings 是一个基于 wepy 框架的 npm 库，提供了方便快捷的加载元素组件，非常适合在微信小程序等场景下使用。
安装
使用 npm 进行安装：
npm install wepy-com-loadings --save-dev
如何使用 wepy-com-loadings
- 引入 wepy-com-loadings 组件
在需要使用加载效果的页面中，import 引入 wepy-com-loading 组件：
import wepyComLoading from 'wepy-com-loadings';
- 注册 wepy-com-loading 组件
在 wepy 注册页面之前，将引入的 wepy-com-loading 组件注册到 wepy 应用中：
export default class Index extends wepy.page{
components = {
wepyComLoading
};
}- 使用 wepy-com-loading 示例
在需要使用 wepy-com-loading 组件的页面中，通过组件名称 wepyComLoading 新建该组件：
<template>
<wepy-com-loading :loadShow.sync="loading.show" :loadType="loading.type"></wepy-com-loading>
</template>详解 wepy-com-loading 组件属性
在 wepy-com-loading 组件中，主要有两个属性：loadShow 和 loadType。
loadShow 属性
loadShow 属性是用来控制加载效果是否展示，它的值可以是 true 或者 false，当值为 true 时，加载效果将展示，值为 false 时，加载效果将隐藏。
完整的用法示例如下：
<wepy-com-loading :loadShow.sync="loading.show"></wepy-com-loading>
export default class Index extends wepy.page {
data = {
loading: {
show: true
}
}
};loadType 属性
loadType 属性是用来控制加载效果的样式，它主要有三种值 —— 'black'、'white'、'wine'，分别代表着不同的效果样式。
完整的用法示例如下：
<wepy-com-loading :loadType="loading.type"></wepy-com-loading>
export default class Index extends wepy.page {
data = {
loading: {
type: 'black'
}
}
};wepy-com-loading 组件自定义
在 wepy-com-loading 组件中，我们还可以根据自身需求进行自定义。例如，可以修改加载效果的颜色、文字提示等。
完整的自定义示例如下：
<template>
<wepy-com-loading :loadShow.sync="loading.show" :loadType="loading.type">
<div class="my-loading">
<img src="assets/images/loading.gif" alt="">
<p>{{loading.text}}</p>
</div>
</wepy-com-loading>
</template>-- -------------------- ---- -------
------ ------- ----- ----- ------- --------- -
---- - -
-------- -
----- -----
----- --------
----- --------
-
-
--结语
通过本文介绍，您可以了解到 wepy-com-loading 组件的使用方法和属性，以及如何实现自定义效果。wepy-com-loadings 是一个非常方便的 npm 库，可以为您的项目带来更好的用户体验。如果您有任何疑问，欢迎在评论区留言交流探讨。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006710b8dd3466f61ffe0d9