您好,登錄后才能下訂單哦!
這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)下載進(jìn)度條,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
我們經(jīng)常會(huì)在APP下載中看到下載進(jìn)度條,這個(gè)進(jìn)度條是為了和用戶交互,告知用戶當(dāng)前的進(jìn)度,不然讓用戶一直處于等待,用戶等超過1分鐘就會(huì)崩潰的,實(shí)現(xiàn)方法:
progress進(jìn)度條是微信小程序的組件,和HTML5的進(jìn)度條progress類似。
progress屬性介紹
屬性名 | 作用 | 參數(shù)值 |
---|---|---|
percent | 進(jìn)度百分比0~100 | |
show-info | 在進(jìn)度條右側(cè)顯示百分比 | true/false 默認(rèn)false |
active | 進(jìn)度條從左往右的動(dòng)畫 | true/false 默認(rèn)false |
stroke-width | 進(jìn)度條線的寬度,單位px | 默認(rèn)6px |
color | 進(jìn)度條顏色 | #09BB07 |
activeColor | 已選擇的進(jìn)度條的顏色 | |
backgroundColor | 未選擇的進(jìn)度條的顏色 |
下載進(jìn)度條制作
一、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">下載進(jìn)度:</text> <progress percent="{{percent}}" show-info active='{{isDown}}' stroke-width="14" /> </view>
這里不光教大家學(xué)會(huì)制作下載進(jìn)度條,順帶教大家做網(wǎng)頁加載過程中的進(jìn)度條,就是最上面那行加載線,反正原理是一樣的,核心還是小程序自帶控件progress
active用于控制顯示進(jìn)度條動(dòng)畫
percent 設(shè)置已選擇的進(jìn)度條進(jìn)度
當(dāng)點(diǎn)擊開始下載的時(shí)候,觸發(fā)startDown事件
二、xxx.js
Page({ data: { isDown: false, percent: 0, }, startDown: function (e) { this.setData({ isDown: true, percent: 100, }) },
js里的代碼比較簡單,data里面isDown控制是否開始下載,percent設(shè)置下載進(jìn)度條
startDown 處理開始下載的邏輯,更新下載進(jìn)度條,以及開始執(zhí)行下載動(dòng)畫效果
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“微信小程序如何實(shí)現(xiàn)下載進(jìn)度條”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。