vue實現(xiàn)簡單loading進度條

更新時間：2021年09月16日 14:42:31 作者：weixin_36897085

這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單loading進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

剛學(xué)習(xí)vue不久，今天試著用vue做了一個簡單的loading進度條，對于vue的生命周期和鉤子函數(shù)又有了新的理解，下面分享給大家，絕對入門級。

一、進度條原理

這個就很簡單了，也是我們經(jīng)?？梢杂玫降模@里只做一個最簡單的，頁面刷新自動加載進度條。主要是讓進度條的width不斷增加至100%就可以啦~好了，進入正題。

二、jquery實現(xiàn)

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet"  > 
  <link rel="stylesheet"  > 
  <title>jq進度條</title> 
 
</head> 
 
<body> 
  <div id="app"> 
    <div class="progress round alert"> 
      <span class="meter" style="width:0%">0%</span> 
    </div> 
  </div> 
 
 
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script> 
  <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js "></script> 
  <script src="https://cdn.bootcss.com/foundation/5.5.3/js/foundation.min.js "></script> 
  <script> 
    $(function () { 
      var html = $('.meter'); 
      var htmlW = $('.meter').val(); 
      var styleW = parseInt($('.meter').css('width')); 
      var clearInt = setInterval(function () { 
        styleW++; 
        var styleWW = styleW + '%'; 
        html.css('width', styleWW); 
        html.html(styleWW); 
        if (styleW == 100) { 
          clearInterval(clearInt); 
        } 
      }, 20) 
    }) 
  </script> 
</body> 
 
</html>

三、vue實現(xiàn)

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
  <title>vue進度條</title> 
  <link rel="stylesheet"  > 
  <link rel="stylesheet"  > 
  <style> 
    .bar{ 
      color: #fff; 
      text-align: center; 
    } 
  </style> 
 
</head> 
 
<body> 
  <div id="app"> 
    <div class="progress alert round"> 
      <span class="meter bar" :style="{width:proBar+'%',}" >{{proBar}}</span> 
    </div> 
  </div> 
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script> 
  <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js "></script> 
  <script src="https://cdn.bootcss.com/foundation/5.5.3/js/foundation.min.js "></script> 
  <script> 
    var app = new Vue({ 
      el: '#app', 
      data: { 
        proBar: 0, 
      }, 
      created(){ 
        this.change(); 
      }, 
      methods: { 
        change: function() { 
            var clearInt = setInterval(function() { 
              app.proBar++; 
              console.log(app.prpBar); 
              if (app.proBar == 100) { 
                clearInterval(clearInt); 
              } 
            }, 20) 
 
        } 
      } 
    }) 
  </script> 
 
</body> 
 
</html>

對比兩段代碼顯然vue要方便許多，因為是雙向綁定，不用來回操作dom，就很簡單省心啦。

注意問題：剛開始沒有實現(xiàn)loading效果，主要是因為用了mounted鉤子函數(shù)來調(diào)用change方法（還是對生命周期理解的不到位）。實現(xiàn)loading效果我們需要在頁面加載時自動調(diào)用change方法，所以我們應(yīng)該在數(shù)據(jù)全部初始化前就執(zhí)行這一操作。mounted時期已經(jīng)全部完成初始化，所以便不會成功。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: