鴻蒙OSUniApp 制作自定義的進度條組件#三方框架 #Uniapp

使用 UniApp 制作自定義的進度條組件

在移動應用開發中,進度條是非常常見的 UI 組件,無論是文件上傳、下載、任務進度還是表單填寫反饋,進度條都能為用戶提供直觀的進度提示。雖然 UniApp 提供了一些基礎的進度條能力,但在實際項目中,我們往往需要更靈活、更美觀的自定義進度條。本文將詳細介紹如何在 UniApp 中手寫一個可復用、可定制的進度條組件,并結合實際案例進行講解。

為什么要自定義進度條?

雖然 UniApp 的 uni-progress 組件可以滿足基礎需求,但在以下場景下自定義進度條更有優勢:

  • 需要特殊的樣式(如漸變色、圓角、動畫等);
  • 需要在進度條上顯示自定義內容(如百分比、圖標、狀態文字等);
  • 需要支持多種主題或適配不同的產品風格;
  • 需要更復雜的交互(如點擊、拖拽調整進度等)。

自定義進度條不僅能提升產品的視覺體驗,還能增強用戶的操作感知。

組件設計思路

在設計自定義進度條組件時,我們需要考慮以下幾點:

  1. 可配置性:支持自定義顏色、高度、圓角、動畫、顯示內容等;
  2. 響應式:進度變化時能平滑過渡,適配不同屏幕尺寸;
  3. 易用性:對外暴露簡單明了的 props,方便父組件傳參;
  4. 可擴展性:后續可以方便地增加新功能,如分段進度、狀態切換等。

組件實現

我們以一個橫向進度條為例,支持自定義顏色、進度、顯示百分比、圓角和動畫。

1. 組件結構

components/progress-bar/progress-bar.vue 下新建組件:

<template><view class="progress-bar-container" :style="containerStyle"><view class="progress-bar-bg" :style="bgStyle"><view class="progress-bar-inner" :style="innerStyle"><text v-if="showText" class="progress-bar-text">{{ displayText }}</text></view></view></view>
</template><script>
export default {name: 'ProgressBar',props: {percent: {type: Number,default: 0},height: {type: String,default: '16px'},bgColor: {type: String,default: '#f5f5f5'},barColor: {type: String,default: 'linear-gradient(90deg, #4facfe 0%, #00f2fe 100%)'},borderRadius: {type: String,default: '8px'},showText: {type: Boolean,default: true},textColor: {type: String,default: '#333'},textInside: {type: Boolean,default: true},animation: {type: Boolean,default: true}},computed: {containerStyle() {return {width: '100%',height: this.height};},bgStyle() {return {width: '100%',height: '100%',background: this.bgColor,borderRadius: this.borderRadius,overflow: 'hidden',position: 'relative'};},innerStyle() {return {width: `${Math.min(this.percent, 100)}%`,height: '100%',background: this.barColor,borderRadius: this.borderRadius,display: 'flex',alignItems: 'center',justifyContent: this.textInside ? 'center' : 'flex-end',color: this.textColor,transition: this.animation ? 'width 0.5s cubic-bezier(0.4,0,0.2,1)' : 'none',position: 'relative'};},displayText() {return `${Math.round(this.percent)}%`;}}
};
</script><style scoped>
.progress-bar-container {width: 100%;
}
.progress-bar-bg {width: 100%;background: #f5f5f5;position: relative;
}
.progress-bar-inner {min-width: 24px;box-sizing: border-box;font-size: 14px;white-space: nowrap;transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}
.progress-bar-text {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);font-size: 14px;color: inherit;
}
</style>

2. 組件使用示例

在頁面中引用并使用自定義進度條組件:

<template><view class="demo-progress"><progress-bar :percent="progress" barColor="#42d392" height="20px" /><progress-bar :percent="progress" barColor="linear-gradient(90deg, #ff5858 0%, #f09819 100%)" height="18px" :showText="true" /><progress-bar :percent="progress" barColor="#007aff" :showText="false" height="12px" /><button @click="increase">增加進度</button></view>
</template><script>
import ProgressBar from '@/components/progress-bar/progress-bar.vue';export default {components: { ProgressBar },data() {return {progress: 30};},methods: {increase() {this.progress = Math.min(this.progress + 10, 100);}}
};
</script><style>
.demo-progress {padding: 32rpx;
}
button {margin-top: 24rpx;
}
</style>

3. 效果展示與擴展

上面的例子中,我們實現了不同顏色、不同高度、是否顯示文本的進度條。你可以根據實際需求進一步擴展:

  • 支持分段進度(如多步表單);
  • 支持自定義進度條末端圖標;
  • 支持垂直方向進度條;
  • 支持點擊或拖拽調整進度(如音量條、進度條拖動)。

總結與思考

自定義進度條組件不僅能提升產品的美觀度和交互體驗,還能幫助開發者深入理解 UniApp 組件化開發的思想。通過合理的 props 設計和樣式封裝,我們可以讓組件既靈活又易用。

在實際開發中,建議多參考優秀的 UI 框架(如 Element、Ant Design 等)對進度條的設計思路,結合自身項目需求進行創新和優化。希望本文能為你在 UniApp 項目中實現自定義進度條提供實用的參考。


如有疑問或更好的實現思路,歡迎在評論區交流分享!

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/82820.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/82820.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/82820.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Python爬蟲實戰:研究Beautiful Soup框架相關技術

1. 引言 1.1 研究背景與意義 隨著互聯網的快速發展,網絡上的數據量呈爆炸式增長。如何從海量的網頁數據中高效提取有價值的信息,成為信息科學領域的重要研究課題。網絡爬蟲作為一種自動獲取網頁內容的技術,能夠按照預設規則遍歷互聯網并采集數據,為信息檢索、輿情分析、商…

【Tips】關于PCI和PCIe的配置空間差異和io/memory io讀寫

最近在看同事2023年講的PCI基礎課&#xff0c;感覺確實是豁然開朗了&#xff0c;贊美同事。 PCIe實際上是PCI的擴展&#xff08;extended&#xff09;&#xff0c;PCIe設備相當于是迭代升級產品。 而PCIe的配置空間基于PCI原有的0xFF&#xff08;256字節&#xff09;配置空間…

桂花網體育運動監測方案:開啟幼兒園運動健康管理新篇章

在幼兒教育領域&#xff0c;運動能力的培養與健康監測始終是備受關注的核心環節。隨著科技的飛速發展&#xff0c;如何科學、有效地監測幼兒的運動狀態&#xff0c;成為了幼兒園教育者面臨的一大挑戰。桂花網體育運動監測方案憑借其高效、精準、智能化的特性&#xff0c;為幼兒…

Perforce P4產品簡介:無限擴展+全球協作+安全管控+工具集成(附下載)

本產品簡介由Perforce中國授權合作伙伴——龍智編輯整理&#xff0c;旨在帶您快速了解Perforce P4版本控制系統的強大之處。 世界級無限可擴展的版本控制系統 Perforce P4&#xff08;原Helix Core&#xff09;是業界領先的版本控制平臺&#xff0c;備受19家全球Top20 AAA級游…

pikachu靶場通關筆記08 XSS關卡04-DOM型XSS

目錄 一、XSS原理 二、DOM型XSS 三、源碼分析 1、進入靶場 2、XSS探測 3、源碼分析 四、滲透實戰 1、Payload1 2、Payload2 3、Payload3 本系列為通過《pikachu靶場通關筆記》的XSS關卡(共10關&#xff09;滲透集合&#xff0c;通過對XSS關卡源碼的代碼審計找到XSS風…

安全訪問 std::tuple 的容錯方法及氣象領域應用

安全訪問 std::tuple 的容錯方法及氣象領域應用 1. std::tuple 安全訪問的核心問題 1.1 元組結構性問題&#xff08;編譯時錯誤&#xff09; 當元組元素數量為空時&#xff08;std::tuple<>&#xff09;&#xff0c;任何訪問元素的嘗試都會導致編譯錯誤?&#xff1a;…

Webug4.0靶場通關筆記03- 第3關SQL注入之時間盲注(手注法+腳本法 兩種方法)

目錄 一、源碼分析 1.分析閉合 2.分析輸出 &#xff08;1&#xff09;查詢成功 &#xff08;2&#xff09;查詢失敗 &#xff08;3&#xff09;SQL語句執行報錯 二、第03關 延時注入 1.打開靶場 2.SQL手注 &#xff08;1&#xff09;盲注分析 &#xff08;2&#xf…

【大模型學習網絡互聯】Memory-Mapped I/O MMIO語義與MEM語義

MMIO語義和MEM語義的區別 嗯&#xff0c;用戶要求更詳細地區分MMIO和MEM語義&#xff0c;看來之前的中文對比雖然系統但還不夠深入。用戶可能是嵌入式開發者或OS內核學習者&#xff0c;需要從硬件行為層面理解差異。 用戶連續追問MMIO相關概念&#xff0c;說明ta在接觸底層開發…

如何在使用kickstart安裝物理機操作系統的過程中核對服務器的SN

原因 在使用kickstart對物理機進行重裝的時候&#xff0c;由于自動化配置&#xff0c;掛載鏡像重啟之后就會自動化開始安裝部署&#xff0c;不夠安全&#xff0c;萬一選錯服務器沒有辦法回退。因此可以在kickstart的ks配置文件中新增服務器SN的校驗&#xff0c;當校驗不通過的…

spring4第4課-ioc控制反轉-詳解如何注入參數

堅持住&#xff0c;第四天&#xff0c;繼續學習spring4.詳解如何注入參數 先總結&#xff0c;主要有如下6種&#xff1a; 1&#xff0c;基本類型值&#xff1b; 2&#xff0c;注入 bean&#xff1b; 3&#xff0c;內部 bean&#xff1b; 4&#xff0c;null 值&#xff1b; 5&…

cf2067A

原題鏈接&#xff1a;https://codeforces.com/contest/2067/problem/A 題目背景&#xff1a; 給定x,y&#xff0c;判讀是否存在 n 滿足S(n) x&#xff0c;S(n 1) y。定義 S(a) 等于 a 的十進制位數之和。 思路&#xff1a; 不難發現一般 n 和 n 1 的位數之和相差為 1&…

微信小程序獲取手機號

詳細代碼 <t-button size"large" theme"primary" variant"outline" data-type"hasCancelBtn" bind:tap"showDialog" block style"display: none;">開放能力按鈕 </t-button> <t-dialog id"t-…

AI重構SEO關鍵詞精準定位

內容概要 隨著AI技術深度滲透數字營銷領域&#xff0c;傳統SEO關鍵詞定位模式正經歷系統性重構。基于自然語言處理&#xff08;NLP&#xff09;的智能語義分析引擎&#xff0c;可突破傳統關鍵詞工具的局限性&#xff0c;通過解析長尾搜索詞中的隱含意圖與語境關聯&#xff0c;…

四足機器人環境監測系統相關問題

一、在設計四足機器人監測與跟蹤系統整體架構時&#xff0c;你主要考慮了哪些因素&#xff1f;為什么這樣設計以確保系統的高效性與穩定性&#xff1f; 在設計四足機器人監測與跟蹤系統整體架構時&#xff0c;主要考慮了傳感器兼容性與通信效率、多任務并發處理能力、實時數據…

uniapp 開發安卓app 微信授權獲取昵稱 頭像登錄

在manifest.json中配置appid 以及appsecret uni.login({provider: weixin,success: function (loginRes) {console.log(loginRes.authResult);// 獲取用戶信息uni.getUserInfo({provider: weixin,success: function (infoRes) {console.log(用戶昵稱為&#xff1a; infoRes.u…

MySQL8.4組復制

https://dev.mysql.com/doc/refman/8.4/en/group-replication.html 1 什么是組復制 組復制主要解決了傳統異步復制主機宕機時可能造成主從節點數據不一致問題MySQL Group Replication&#xff0c;簡稱MGR將原有的gtid復制功能進行可增強&#xff0c;支持單主模式和多主模式組復…

Python后端開發實戰:從0到1搭建高可用API服務

引言 Python憑借其簡潔的語法和豐富的生態(如Django、Flask、FastAPI等框架),已成為后端開發的主流語言之一。本文將結合一個真實電商API項目,分享從架構設計到部署上線的完整流程,并總結開發過程中常見的坑與最佳實踐。 一、實戰案例:電商API開發流程 1.1 技術選型 框…

本地部署大模型llm+RAG向量檢索問答系統 deepseek chatgpt

項目視頻講解: 本地部署大模型llm+RAG向量檢索問答系統 deepseek chatgpt_嗶哩嗶哩_bilibili 運行結果:

aws instance store 的恢復

1: aws instance store 要在launch instance 才可以創建,而且,通過snapshot 恢復后,instance store 里面的數據會丟失。 下面是創建instance store 的過程,和通過兩種方式恢復,發現/etc/fstab 不同的寫法,有的不能啟動: [root@ip-xx ~]# lsblk NAME MAJ:MIN RM …

React 生命周期與 Hook 理解解析

從生命周期到 Hook&#xff1a;React 組件演進之路 React 組件的本質是管理渲染與副作用的統一體。Class 組件通過生命周期方法實現這一目標&#xff0c;而函數組件則依靠 Hook 系統達成相同效果。 Class 組件生命周期詳解 生命周期完整流程 Class 組件生命周期可分為三大階…