首頁 >web前端 >js教程 >在微信小程式中如何實現下載進度條

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

亚连
亚连原創
2018-06-21 18:34:491715瀏覽

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

我們常常會在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>

  2. 這裡不光教大家學會製作下載進度條,順帶教大家做網頁載入過程中的進度條,就是最上面那行加載線,反正原理是一樣的,核心還是小程式自帶控制項progress
  3. ##active用於控制顯示進度條動畫
  4. percent 設定已選擇的進度條進度
  5. 當點擊開始下載的時候,觸發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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn