快捷導(dǎo)航

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à)值，感興趣的小伙伴們可以參考一下

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

小白的我感覺實(shí)現(xiàn)起來有難度，于是上百度看看別人是怎么做的，結(jié)果沒找到一個(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)占比效果

通過添加偽元素遮擋和移動(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)了，還不是很完善，有什么意見或者疑問歡迎提出來。

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

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目中按鈕防抖處理實(shí)現(xiàn)過程
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中按鈕防抖處理實(shí)現(xiàn)的相關(guān)資料,在項(xiàng)目開發(fā)中相必大家時(shí)常會(huì)遇到按鈕重復(fù)點(diǎn)擊后引起事件重復(fù)提交的問題,需要的朋友可以參考下
2023-08-08
Vue3項(xiàng)目中的hooks的使用教程
今天我們稍微說一下 vue3 項(xiàng)目中的 hooks 的使用，其實(shí)這個(gè) hooks 呢是和 vue2 當(dāng)中的 mixin 是類似的，學(xué)習(xí)過 vue2 的小伙伴一定對(duì) mixin 一定比較熟悉，快跟隨小編一起來學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
Vue.js 插件開發(fā)詳解
本文會(huì)通過一個(gè)簡單的vue-toast插件，來幫助了解掌握插件的開發(fā)和使用。具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-03-03
利用vue實(shí)現(xiàn)打印頁面的幾種方法總結(jié)
在項(xiàng)目里有個(gè)打印功能,將頁面的部分內(nèi)容打印出來,所以下面這篇文章主要給大家介紹了關(guān)于利用vue實(shí)現(xiàn)打印頁面的幾種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
Vue讓router-view默認(rèn)顯示頁面操作方法
一個(gè)home頁面,點(diǎn)擊左邊的菜單欄,右邊顯示頁面,因此都知道在右邊放一個(gè)router-view然后配置路由即可,然而問題出現(xiàn)在：重新打開的時(shí)候,默認(rèn)是白色空的,遇到這樣的問題如何解決呢,下面小編給大家分享Vue讓router-view默認(rèn)顯示頁面操作方法,感興趣的朋友一起看看吧
2024-03-03
淺談VUE uni-app 開發(fā)環(huán)境
這篇文章主要介紹了uni-app的開發(fā)環(huán)境，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2021-10-10
降低vue-router版本的2種解決方法實(shí)例
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁面應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于降低vue-router版本的2種解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
uniapp使用v-loading并且不引入element-ui的操作方法
這篇文章主要介紹了uniapp使用v-loading并且不引入element-ui,首先創(chuàng)建loading.js，創(chuàng)建lloading.scss，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-10-10
vue中跨域以及sessionId不一致問題及解決
這篇文章主要介紹了vue中跨域以及sessionId不一致問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-12-12
Pinia 的 Setup Stores 語法使用實(shí)例詳解
這篇文章主要為大家介紹了Pinia 的 Setup Stores 語法使用實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09