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

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

1. Vue Simple Spinner

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

顧名思義，這是一個(gè)非常簡(jiǎn)單的組件，但功能仍然非常強(qiáng)大。Vue Simple Spinner提供了可定制加載樣式。使用  props，我們可以控制對(duì)應(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è)非常棒的庫(kù)。

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

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

安裝：

npm install --save vue-radial-progress

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

<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)擊，則此庫(kù)很有用。

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

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

安裝命令：

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 是最流行的加載庫(kù)之一。由 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è)庫(kù)還有一個(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 是一種簡(jiǎn)單而有效的方式，可以向用戶顯示某些內(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è)庫(kù)，需要一些時(shí)間成本，但在一些需要用戶體驗(yàn)極好的需求里，可以使用它。

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

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

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

廣告

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