uniapploading的使用指南

一、基本介绍

uniapploading是一款基于uni-app框架开发的加载动画插件，主要用于提高用户体验，使用户在等待数据加载或页面切换的过程中不感到无聊或焦躁，从而提高用户留存率和转化率。uniapploading支持多种不同的加载动画效果，使用起来非常方便。

二、使用方法

1、安装插件：在uni-app项目中的根目录运行以下命令进行安装：

npm install uniapploading --save

2、引入插件：在需要使用加载动画的页面或组件中，在script标签中引入插件并注册组件：

import uniLoading from 'uniapploading';
export default {
  components: {
    uniLoading
  },
  //其他代码
}

3、在需要显示加载动画的地方，使用uni-loading组件进行包裹：

<uni-loading></uni-loading>

4、在Vue的methods中，使用uni.showLoading()方法显示加载动画，使用uni.hideLoading()方法关闭加载动画。

methods: {
  loadData() {
    uni.showLoading({
      title: '加载中'
    });
    //其他加载数据的代码
    uni.hideLoading();
  }
}

三、加载动画效果

uniapploading支持以下几种加载动画效果：

1、ring：环形旋转

<uni-loading type="ring"></uni-loading>

2、circle：圆形缩放

<uni-loading type="circle"></uni-loading>

3、dot：点形闪烁

<uni-loading type="dot"></uni-loading>

4、chiaroscuro：渐变变色

<uni-loading type="chiaroscuro"></uni-loading>

5、custom：自定义图标

<uni-loading type="custom">
  <img src="url">
</uni-loading>

四、自定义样式

uniapploading也支持自定义样式，在使用时可以通过style属性传入样式：

<uni-loading type="circle" style="width: 50px; height: 50px;"></uni-loading>

五、常见问题

1、加载动画不显示？

可能原因：引入了插件但是没有注册组件。

import uniLoading from 'uniapploading';
export default {
  components: {
    uniLoading
  },
  //其他代码
}

2、自定义图标不显示？

可能原因：img标签中的src属性路径不正确，可以尝试使用绝对路径或者相对路径。

<uni-loading type="custom">
  <img src="../../static/logo.png">
</uni-loading>

3、如何全局使用uni.showloading()和uni.hideloading()？

在全局main.js文件中注册uni.showloading()和uni.hideloading()方法即可。

import uniLoading from 'uniapploading';
Vue.prototype.$showLoading = uni.showLoading;
Vue.prototype.$hideLoading = uni.hideLoading;
//其他代码