本篇文章主要介紹了微信小程式實作下載進度條的方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧
我們常常會在APP下載中看到下載進度條,這個進度條是為了和用戶交互,告知用戶當前的進度,不然讓用戶一直處於等待,用戶等超過1分鐘就會崩潰的,今天代碼君就教大家如何在小程式中也製作下載進度條
progress進度條是微信小程式的元件,和HTML5的進度條progress類似。
progress屬性介紹
屬性名稱 | ##參數值 | |
---|---|---|
##percent | 進度百分比0~100 | |
#show-info | 在進度條右側顯示百分比 | |
#active | 進度條從左到右的動畫 | |
#stroke-width | 進度條線的寬度,單位px | |
#color | 進度條顏色 | |
#activeColor | 已選取的進度條的顏色 | |
backgroundColor | 未選取的進度條的顏色 |
下載進度條製作
一、wxml視圖製作
<progress percent="100" active='true' stroke-width="4" /> <view class='title-line'> progress</view> <view class='column'> <button class='button' type='primary' size='mini' bindtap='startDown'>开始下载</button> <text class="title">下载进度:</text> <progress percent="{{percent}}" show-info active='{{isDown}}' stroke-width="14" /> </view>
#二、xxx.js
Page({ data: { isDown: false, percent: 0, }, startDown: function (e) { this.setData({ isDown: true, percent: 100, }) },js裡的程式碼比較簡單,data裡面isDown控制是否開始下載,percent設定下載進度條startDown 處理開始下載的邏輯,更新下載進度條,以及開始執行下載動畫效果
#總結
進度條用處很多,代碼君只是列舉了上面的兩個例子,其實進度條還可以做搶購銷量剩餘進度條,時間完成剩餘度等等,給讀者留個小作業,請讀者自行完成我列舉出來的另外兩個進度條例子,好啦,今天關於進度條就講到這裡。 上面是我整理給大家的,希望今後對大家有幫助。 相關文章: ###以上是在微信小程式中如何實現下載進度條的詳細內容。更多資訊請關注PHP中文網其他相關文章!