欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實現(xiàn)動態(tài)圓環(huán)百分比進(jìn)度條

 更新時間：2021年09月16日 14:46:13   作者：浮夸的小白  
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)動態(tài)圓環(huán)百分比進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近在開發(fā)小程序的時候，碰到一個實現(xiàn)圓環(huán)百分比進(jìn)度條的需求，類似如下設(shè)計圖：

小白的我感覺實現(xiàn)起來有難度，于是上百度看看別人是怎么做的，結(jié)果沒找到一個滿意的，要不是靜態(tài)的實現(xiàn)，就是需要用到比較多的DOM操作，小程序還是盡量避免直接操作DOM。

下面是我以Vue組件形式做的一個動態(tài)的實現(xiàn)，先上效果圖：

效果

實現(xiàn)步驟

畫一個餅圖

.pie {
  display: inline-block;
  position: relative;
  width: 150px;
  height: 150px;
  margin-top: 40px;
  border-radius: 50%;
  background: #ccc;
  background-image: linear-gradient(to right, transparent 50%, #4479FD 0);
  color: transparent;
  text-align: center;
}

實現(xiàn)占比效果

通過添加偽元素遮擋和移動實現(xiàn)，代碼如下：

.pie::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 50%; height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  animation: spin 5s linear infinite, bg 10s step-end infinite;
}
@keyframes spin {
  to { transform: rotate(.5turn); }
}
@keyframes bg {
  50% { background: #4479FD; }
}

使用CSS動畫延遲屬性

將上面的animation動畫時間分別改為50, 100，這樣可以直接在animation-delay傳入相應(yīng)的延遲秒數(shù)，比如-60s則是顯示在百分之六十

animation-play-state: paused;
animation-delay: -60s;

實現(xiàn)圓環(huán)形狀

直接在div里加上一個定位的div

<div class="pie">
  <div class="pie-inner">
  {{num}}%
  </div>
</div>

加上一個勻速動畫

startAnimate (step, limit, speed) {
  setTimeout(() => {
  // num 為百分比
    if (this.num < limit) {
      this.num += step
      this.startAnimate(step, limit, speed)
    } else {
      this.num = limit
    }
  }, speed)
}

給animation-delay綁定計算屬性

實時根據(jù)num轉(zhuǎn)化為相應(yīng)的延遲秒數(shù)

computed: {
    delay () {
      return `-${this.num}s`
    }
}

總結(jié)

至此，一個動態(tài)的圓環(huán)百分比進(jìn)度條基本實現(xiàn)了，還不是很完善，有什么意見或者疑問歡迎提出來。

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

相關(guān)文章

最新評論