在微信小程式中如何實現下載進度條

本篇文章主要介紹了微信小程式實作下載進度條的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

我們常常會在APP下載中看到下載進度條，這個進度條是為了和用戶交互，告知用戶當前的進度，不然讓用戶一直處於等待，用戶等超過1分鐘就會崩潰的，今天代碼君就教大家如何在小程式中也製作下載進度條

progress進度條是微信小程式的元件，和HTML5的進度條progress類似。

progress屬性介紹

true/false 預設falsetrue /false 預設false 預設6px#09BB07

屬性名稱		##參數值
	##percent	進度百分比0~100
	#show-info	在進度條右側顯示百分比
	#active	進度條從左到右的動畫
	#stroke-width	進度條線的寬度，單位px
	#color	進度條顏色
	#activeColor	已選取的進度條的顏色
	backgroundColor	未選取的進度條的顏色

下載進度條製作

一、wxml視圖製作

1. <progress percent="100" active=&#39;true&#39; stroke-width="4" />
   <view class=&#39;title-line&#39;>
    progress</view>
   
   <view class=&#39;column&#39;>
    <button class=&#39;button&#39; type=&#39;primary&#39; size=&#39;mini&#39; bindtap=&#39;startDown&#39;>开始下载</button>
   
    <text class="title">下载进度：</text>
   
    <progress percent="{{percent}}" show-info active=&#39;{{isDown}}&#39; stroke-width="14" />
   </view>

這裡不光教大家學會製作下載進度條，順帶教大家做網頁載入過程中的進度條，就是最上面那行加載線，反正原理是一樣的，核心還是小程式自帶控制項progress

2. ##active用於控制顯示進度條動畫

3. percent 設定已選擇的進度條進度

4. 當點擊開始下載的時候，觸發startDown事件

#二、xxx.js

Page({
 data: {
 isDown: false,
 percent: 0,
},
startDown: function (e) {
 this.setData({
  isDown: true,
  percent: 100,
 })
 },

js裡的程式碼比較簡單，data裡面isDown控制是否開始下載，percent設定下載進度條

startDown 處理開始下載的邏輯，更新下載進度條，以及開始執行下載動畫效果

#總結

進度條用處很多，代碼君只是列舉了上面的兩個例子，其實進度條還可以做搶購銷量剩餘進度條，時間完成剩餘度等等，給讀者留個小作業，請讀者自行完成我列舉出來的另外兩個進度條例子，好啦，今天關於進度條就講到這裡。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

有關JavaScript的偽數組用法（詳細教學）

使用JS如何判斷客戶端類型

使用webpack如何擷取第三方函式庫

JavaScript模組最佳化

使用webpack express如何實作多頁網站開發

Webpack框架（掌握核心技術）

###

以上是在微信小程式中如何實現下載進度條的詳細內容。更多資訊請關注PHP中文網其他相關文章！