微信小程序进度条

ANGS • 2024-11-03 15:16 • 编程

一、基本介绍

微信小程序的进度条可以帮助用户直观地了解当前任务的完成情况，可以根据不同情况来显示不同的颜色和进度百分比。

可设置样式和模式，例如：进度条颜色、高度、是否滑动展示等。

同时，也可以使用预加载的组件，方便快捷地使用进度条功能。

二、进度条用法

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：自定义进度条进度改变时触发的事件。

四、总结

微信小程序的进度条是开发者方便展示任务完成情况的重要工具，不仅具有多种属性和事件，还可以设置多种样式和模式。通过本文的介绍和示例，相信大家已经掌握了进度条的使用方法，具备了一定的自定义能力和开发技巧。

原创文章，作者：ANGS，如若转载，请注明出处：https://www.506064.com/n/148572.html