微信小程序组件progress进度条怎么弄-创新互联

小编给大家分享一下微信小程序组件progress进度条怎么弄，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

progress进度条组件说明:

进度条，就是表示事情当前完成到什么地步了，可以让用户视觉上感知事情的执行。
progress进度条是微信小程序的组件，和HTML5的进度条progress类似。

progress进度条组件示例代码运行效果如下：

下面是WXML代码：

    问：老司机，啥时候开车？
    

下面是JS代码：

Page({
  data:{
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

下面是WXSS代码：

.content{
  padding-top: 20px;
}
.con-text{
  display: block;
  padding-bottom: 20px;
}
.con-pro{
  color: cornflowerblue;
}

下面是WXML代码：

    不展示百分比
    
    展示百分比(百分比字体样式通过class控制)
    
    改变进度条线的宽度:15px
    
    改变进度条颜色(#)：黑色
    
    改变进度条颜色(已定义)：橘色
    
    几个属性叠加
    

下面是JS代码：

Page({
  data:{
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

下面是WXSS代码：

.content{
  padding-top: 20px;
}
.con-text{
  display: block;
  padding-bottom: 10px;
}
.con-pro{
  padding-bottom: 30px;
  color: cornflowerblue;
}

下面是WXML代码：

    看我开的飞起
    

下面是JS代码：

Page({
  data:{
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

下面是WXSS代码：

.content{
  padding-top: 20px;
}
.con-text{
  display: block;
  padding-bottom: 10px;
}
.con-pro{
  padding-bottom: 30px;
  color: cornflowerblue;
}

progress进度条的主要属性：

看完了这篇文章，相信你对“微信小程序组件progress进度条怎么弄”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！