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;
//其他代碼