微信小程序進度條

一、基本介紹

微信小程序的進度條可以幫助用戶直觀地了解當前任務的完成情況，可以根據不同情況來顯示不同的顏色和進度百分比。

可設置樣式和模式，例如：進度條顏色、高度、是否滑動展示等。

同時，也可以使用預加載的組件，方便快捷地使用進度條功能。

二、進度條用法

1. 預加載進度條

預加載進度條是微信小程序提供的一種快速使用進度條的方式，直接調用 wx.showLoading() 即可顯示。

wx.showLoading({
  title: '加載中',
})

該方法默認為系統樣式，不可更改，適用於簡單的加載提示等情況。

2. 自定義進度條

自定義進度條可以通過調用 wx.createAnimation() 方法先創建一個動畫實例，然後通過設置動畫實例的屬性實現進度條的效果。

// HTML部分

  


// JS部分
Page({
  data: {
    animation: {},
    percent: 0,
    interval: null,
  },
  startProgress() {
    let animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'linear',
    })
    this.animation = animation
    animation.width('100%').step()
    this.setData({ animation: animation.export(), percent: 100 })
  },
})

自定義進度條可以根據需求設置樣式和動畫，並可以自由調整進度和速度等屬性，適用於需要自由度較高的進度顯示場景。

三、屬性和事件

1. 屬性

微信小程序的進度條提供了多個屬性，可以根據需求進行設置。

• percent: 進度百分比，默認為0，取值範圍為0到100。
• showInfo：是否展示內部進度百分比，默認為true。
• status：狀態，可選值：’success’、’error’、’active’，默認為’active’。
• strokeWidth：進度條線的寬度，單位rpx，默認為6。

2. 事件

微信小程序的進度條提供了多個事件，可以監控進度條的變化或者點擊事件。

• bindactiveend：自定義進度條動畫結束後觸發的事件。
• bindbypercent：自定義進度條觸摸滑動時觸發的事件。
• bindactivechanged：自定義進度條進度改變時觸發的事件。

四、總結

微信小程序的進度條是開發者方便展示任務完成情況的重要工具，不僅具有多種屬性和事件，還可以設置多種樣式和模式。通過本文的介紹和示例，相信大家已經掌握了進度條的使用方法，具備了一定的自定義能力和開發技巧。