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

我們提供的服務有：成都做網(wǎng)站、網(wǎng)站設計、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、新鄉(xiāng)縣ssl等。為上1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術(shù)的新鄉(xiāng)縣網(wǎng)站制作公司

1. Vue Simple Spinner

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

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

• Size

• Background and foreground colors

• Speed

• Label Text

• Much more…

安裝命令：

npm install vue-simple-spinner --save.

然后，將其導入到組件中，在模板中進行聲明，然后更改所需的 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

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

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

具有平滑的動畫，可自定義的功能以及基于SVG的填充系統(tǒ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  **是全屏加載組件的理想解決方案。例如，如果應用程序包含某種儀表板，并且要等到所有數(shù)據(jù)加載完畢后再讓用戶四處點擊，則此庫很有用。

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

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

安裝命令：

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團隊成員Guillaume  Chau創(chuàng)建，這也是我最喜歡使用的工具之一。

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

使用npm i --save vue-progress-path將其添加到項目中，然后使用將該文件全局添加到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)在，來看看如何向組件添加進度 path 。

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

這個庫還有一個很好地方，更改樣式無須通過 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)容正在加載。

它所做的只是在按鈕被點擊時添加一個轉(zhuǎn)輪動畫。但有了平滑的動畫，它可以創(chuàng)建一個無縫的外觀，使網(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 的體驗是非常好的。但是，這需要相當繁瑣的代碼，也要合理的規(guī)劃元素。

我認為理解這一點的最好方法就是寫個例子。

首先，使用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>

如上所見，如果要使用這個庫，需要一些時間成本，但在一些需要用戶體驗極好的需求里，可以使用它。

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

網(wǎng)站名稱：如何使用Vue加載動畫庫來減少我們網(wǎng)站的跳出率
路徑分享：http://www.chinadenli.net/article42/pgepec.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供、定制開發(fā)、網(wǎng)站排名、企業(yè)網(wǎng)站制作、定制網(wǎng)站、網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)