如何使用Vue加載動(dòng)畫庫來減少我們網(wǎng)站的跳出率

這篇文章主要為大家展示了“如何使用Vue加載動(dòng)畫庫來減少我們網(wǎng)站的跳出率”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用Vue加載動(dòng)畫庫來減少我們網(wǎng)站的跳出率”這篇文章吧。

1. Vue Simple Spinner

github：https://dzwillia.github.io/vue-simple-spinner/examples/

顧名思義，這是一個(gè)非常簡單的組件，但功能仍然非常強(qiáng)大。Vue Simple Spinner提供了可定制加載樣式。使用  props，我們可以控制對應(yīng)的樣式：

• Size

• Background and foreground colors

• Speed

• Label Text

• Much more…

安裝命令：

npm install vue-simple-spinner --save.

然后，將其導(dǎo)入到組件中，在模板中進(jìn)行聲明，然后更改所需的 props:

<template>    <vue-simple-spinner size="medium" /> </template> <script> import VueSimpleSpinner from 'vue-simple-spinner' export default {    components: {        VueSimpleSpinner    } }

效果如下：

2. Vue Radial Progress

github 地址：https://github.com/wyzantinc/vue-radial-progress

如果你想要的是一個(gè)真正的進(jìn)度條而不是旋轉(zhuǎn)動(dòng)畫，Vue Radial Progress 一個(gè)非常棒的庫。

Vue Radial Progress 可以在在進(jìn)度欄中設(shè)置步驟數(shù)以及用戶當(dāng)前所處的步驟。然后，根據(jù)完成的數(shù)量填充進(jìn)度條的一定百分比。

具有平滑的動(dòng)畫，可自定義的功能以及基于SVG的填充系統(tǒng)，當(dāng)您具有包含多個(gè)離散步驟的異步過程時(shí)，此庫將非常強(qiáng)大。

安裝：

npm install --save vue-radial-progress

此外，該庫使用組件插槽使圓內(nèi)添加文本變得簡單

<template>   <radial-progress-bar :diameter="200"                        :completed-steps="completedSteps"                        :total-steps="totalSteps">    <p>Total steps: {{ totalSteps }}</p>    <p>Completed steps: {{ completedSteps }}</p>   </radial-progress-bar> </template>  <script> import RadialProgressBar from 'vue-radial-progress'  export default {   data () {     return {       completedSteps: 0,       totalSteps: 10     }   },    components: {     RadialProgressBar   } } </script>

3.Vue Loading Overlay

github: https://github.com/ankurk91/vue-loading-overlay

**Vue Loading Overlay  **是全屏加載組件的理想解決方案。例如，如果應(yīng)用程序包含某種儀表板，并且要等到所有數(shù)據(jù)加載完畢后再讓用戶四處點(diǎn)擊，則此庫很有用。

這個(gè)庫還有一個(gè)好用的特性就是加載時(shí)，用戶點(diǎn)擊遮罩，可以取消加載，并觸發(fā)一個(gè)事件，我們可以使用該事件取消正在運(yùn)行的任何任務(wù)。

添加此功能，可以允許用戶自行決定任務(wù)何時(shí)花費(fèi)太長時(shí)間來加載和退出。這意味著他們不必離開頁面。

安裝命令：

npm install --save vue-loading-overlay

下面是 Loading Overlay library 使用示例：

<template>     <div class="vld-parent">         <loading :active.sync="isLoading"          :can-cancel="true"          :on-cancel="onCancel"         :is-full-page="fullPage"></loading>                  <label><input type="checkbox" v-model="fullPage">Full page?</label>         <button @click.prevent="doAjax">fetch Data</button>     </div> </template>  <script>     // Import component     import Loading from 'vue-loading-overlay';     // Import stylesheet     import 'vue-loading-overlay/dist/vue-loading.css';          export default {         data() {             return {                 isLoading: false,                 fullPage: true             }         },         components: {             Loading         },         methods: {             doAjax() {                 this.isLoading = true;                 // simulate AJAX                 setTimeout(() => {                   this.isLoading = false                 },5000)             },             onCancel() {               console.log('User cancelled the loader.')             }         }     } </script>

4. Vue Progress Path

github 地址：https://github.com/Akryum/vue-progress-path

Vue Progress Path 是最流行的加載庫之一。由 Vue Core團(tuán)隊(duì)成員Guillaume  Chau創(chuàng)建，這也是我最喜歡使用的工具之一。

使用 SVG，Vue Progress Path  會(huì)創(chuàng)建成形的進(jìn)度條。它帶有幾個(gè)內(nèi)置的形狀，但是最強(qiáng)大的功能是能夠傳遞我們自己的SVG形狀-這意味著無限的可能性。

使用npm i --save vue-progress-path將其添加到項(xiàng)目中，然后使用將該文件全局添加到src/main.js文件中。

import 'vue-progress-path/dist/vue-progress-path.css' import VueProgress from 'vue-progress-path'  Vue.use(VueProgress, {   // defaultShape: 'circle', })

現(xiàn)在，來看看如何向組件添加進(jìn)度 path 。

<loading-progress   :progress="progress"   :indeterminate="indeterminate"   :counter-clockwise="counterClockwise"   :hide-background="hideBackground"   shape="semicircle"   size="64" />

這個(gè)庫還有一個(gè)很好地方，更改樣式無須通過 props ，直接使用CSS代碼來編輯樣式：

.vue-progress-path path {   stroke-width: 12; }  .vue-progress-path .progress {   stroke: red; }

5. Vue Loading Button

github 地址：https://github.com/shwilliam/vue-loading-button

Vue Loading Button 是一種簡單而有效的方式，可以向用戶顯示某些內(nèi)容正在加載。

它所做的只是在按鈕被點(diǎn)擊時(shí)添加一個(gè)轉(zhuǎn)輪動(dòng)畫。但有了平滑的動(dòng)畫，它可以創(chuàng)建一個(gè)無縫的外觀，使網(wǎng)站流行。

安裝：

npm install --save vue-loading-button

示例：

<template>    <VueLoadingButton aria-label='Send message' /> </template> <script> import VueLoadingButton from 'vue-loading-button'  export default {   components: {     VueLoadingButton,   } } </script>

6. TB Skeleton

github 地址：https://github.com/anthinkingcoder/tb-skeleton

TBSkeleton 的體驗(yàn)是非常好的。但是，這需要相當(dāng)繁瑣的代碼，也要合理的規(guī)劃元素。

我認(rèn)為理解這一點(diǎn)的最好方法就是寫個(gè)例子。

首先，使用npm install --save tb-skeleton安裝。然后，將下面內(nèi)容添加到src/main.js文件中。

import skeleton from 'tb-skeleton' import  'tb-skeleton/dist/skeleton.css' Vue.use(skeleton)

下面是 TBSkeleton 文檔中的骨架組件示例。

<template>   <div>     <skeleton :theme="opacity" :shape="radius" :bg-color="#dcdbdc">      <tb-skeleton  width="30%" :aspect-ratio="1"  :shape="circle" bg-color="#eee"></tb-skeleton>      <tb-skeleton  width="30%" :aspect-ratio=".3"></tb-skeleton>      <tb-skeleton  width="30%" :aspect-ratio=".3"></tb-skeleton>    </skeleton>   </div> </template> <script>   import {TbSkeleton,Skeleton} from 'tb-skeleton'   export default {     components: {       TbSkeleton,       Skeleton     }   } </script>

如上所見，如果要使用這個(gè)庫，需要一些時(shí)間成本，但在一些需要用戶體驗(yàn)極好的需求里，可以使用它。

以上是“如何使用Vue加載動(dòng)畫庫來減少我們網(wǎng)站的跳出率”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！