亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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

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

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

效果

實(shí)現(xiàn)步驟

畫一個(gè)餅圖

.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;
}

實(shí)現(xiàn)占比效果

通過(guò)添加偽元素遮擋和移動(dòng)實(shí)現(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動(dòng)畫延遲屬性

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

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

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

直接在div里加上一個(gè)定位的div

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

加上一個(gè)勻速動(dòng)畫

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ì)算屬性

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

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

總結(jié)

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

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

相關(guān)文章

最新評(píng)論