微信小程序中如何实现进度条

 时间:2026-02-15 03:06:27

1、打开微信开发者工具,新建一个微信小程序项目。

微信小程序中如何实现进度条

2、新建一个页面及其相对应的js、json、wxss文件。首先打开wxml文件,输入代码

<progress percent='{{pro}}' show-info />保存该文件。

微信小程序中如何实现进度条

3、打开js文件,设置变量progressNum,该变量用于实现数量的增加。设置页面的初始数据pro初始值为0。pro即为wxml页面中{{pro}}

微信小程序中如何实现进度条

4、在onLoad方法中,设置一个定时器timer,每隔20毫秒,变量progressNum++,并将该值赋值给页面的变量pro。

微信小程序中如何实现进度条

5、设置变量progressNum的限制条件,当增长到100的时候,清除定时器。

微信小程序中如何实现进度条

6、运行项目,进度条会从0慢慢达到100,到达100后即停止。

微信小程序中如何实现进度条

微信小程序中如何实现进度条

  • eclipse编码格式如何设置?
  • 在IDEA中的cannot_resolve_method解决方法
  • 微信小程序怎么获取data里的数据
  • IntelliJ IDEA代码工具怎么创建package包
  • 如何在plsql中登陆oracle数据库
  • 热门搜索
    西游记手抄报图片 国庆节手抄报简单易画 少先队建队日手抄报 鲁滨逊漂流记手抄报 教师节手抄报一等奖简单 欢度国庆手抄报简单 勿忘国耻振兴中华手抄报 六年级语文手抄报 关于夏天的手抄报 关于反邪教的手抄报