简介
wechat-loading 是一款基于 CSS3 动画实现的微信小程序加载动画组件，它支持自定义颜色，大小，透明度等样式。使用该组件可以提高小程序的用户体验，为用户提供更好的加载体验。
安装与引入
使用 npm 安装 wechat-loading 组件：
npm install wechat-loading --save
然后在需要使用的页面或组件中引入组件：
import wechatLoading from 'wechat-loading'
基本用法
在需要使用加载动画的位置添加以下代码：
<wechatLoading size="68px" color="#1AAD19" opacity="0.8"></wechatLoading>
其中，size 表示加载动画的大小，color 表示加载动画的颜色，opacity 表示加载动画的透明度。
自定义样式
wechat-loading 支持自定义样式，可以通过修改其默认属性来实现。
// 设置默认样式
wechatLoading.setDefaultOptions({
size: '68px',
color: '#1AAD19',
opacity: '0.8'
})也可以在使用时单独传入样式：
<wechatLoading size="68px" color="#1AAD19" opacity="0.8"></wechatLoading>
我们可以通过修改 size，color，opacity 等属性来实现不同样式的加载动画。
示例代码
-- -------------------- ---- -------
-- ----
------ ------------- ---- ----------------
-- ------
---------------------------------
----- -------
------ ----------
-------- -----
--
------
----- -
-------- -----
--
-- -----------
-------- ---------- -
--------------
-------- ----
--
--
-- -----------
------- ---------- -
--------------
-------- -----
--
-
--<!-- 添加组件 -->
<wechatLoading hidden="{{!loading}}"></wechatLoading>
<view class="btn" bindtap="bindtap">点击加载</view>总结
总的来说，wechat-loading 是一款非常方便实用的微信小程序加载动画组件。它不但可以提高小程序的用户体验，为用户提供更好的加载体验，而且支持自定义样式，非常灵活，可以满足不同的需求。希望本篇文章能够给你带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c981e8991b448e8f63